| summaryrefslogtreecommitdiff | 
diff options
| author | nsensfel <SpamShield0@noot-noot.org> | 2017-10-25 13:36:42 +0200 | 
|---|---|---|
| committer | nsensfel <SpamShield0@noot-noot.org> | 2017-10-25 13:36:42 +0200 | 
| commit | 73055686dc97787564e4213153d175a2996a127f (patch) | |
| tree | be3b8a2128706b6381f60239da87a7a4bc17239c | |
| parent | b11c62796dce7f482c6e8ddacef591a6a3821145 (diff) | |
Split CSS into multiple files. Renames some stuff.
| -rw-r--r-- | Makefile | 2 | ||||
| -rw-r--r-- | src/asset/Makefile | 4 | ||||
| -rw-r--r-- | src/asset/www/characters.css | 4 | ||||
| -rw-r--r-- | src/asset/www/tiles.css | 3 | ||||
| -rw-r--r-- | src/battlemap/src/Character.elm | 4 | ||||
| -rw-r--r-- | src/battlemap/src/Shim/Model.elm | 16 | ||||
| -rw-r--r-- | src/battlemap/src/View.elm | 2 | ||||
| -rw-r--r-- | src/battlemap/src/View/Battlemap/Navigator.elm | 20 | ||||
| -rw-r--r-- | src/battlemap/src/View/Battlemap/Tile.elm | 2 | ||||
| -rw-r--r-- | src/battlemap/src/View/Footer/ManualControls.elm | 2 | ||||
| -rw-r--r-- | src/battlemap/src/View/Footer/TabMenu.elm | 67 | ||||
| -rw-r--r-- | src/battlemap/src/View/Footer/TabMenu/Characters.elm | 27 | ||||
| -rw-r--r-- | src/battlemap/src/View/Footer/TabMenu/Settings.elm | 4 | ||||
| -rw-r--r-- | src/battlemap/src/View/Footer/TabMenu/Status.elm | 10 | ||||
| -rw-r--r-- | src/battlemap/src/View/Header.elm | 2 | ||||
| -rw-r--r-- | src/battlemap/www/index.html | 201 | ||||
| -rw-r--r-- | src/battlemap/www/style.css | 111 | ||||
| -rw-r--r-- | src/global/Makefile | 4 | ||||
| -rw-r--r-- | src/global/www/style.css | 27 | 
19 files changed, 256 insertions, 256 deletions
| @@ -1,4 +1,4 @@ -MODULES = battlemap +MODULES = battlemap global asset  SRC_DIR = ${CURDIR}/src  WWW_DIR = ${CURDIR}/www diff --git a/src/asset/Makefile b/src/asset/Makefile new file mode 100644 index 0000000..73216f7 --- /dev/null +++ b/src/asset/Makefile @@ -0,0 +1,4 @@ +build: + +clean: + diff --git a/src/asset/www/characters.css b/src/asset/www/characters.css new file mode 100644 index 0000000..efe407d --- /dev/null +++ b/src/asset/www/characters.css @@ -0,0 +1,4 @@ +.asset-character-icon-0 {background-color: Aqua;} +.asset-character-icon-1 {background-color: Aquamarine;} +.asset-character-icon-2 {background-color: Purple;} +.asset-character-icon-3 {background-color: RebeccaPurple;} diff --git a/src/asset/www/tiles.css b/src/asset/www/tiles.css new file mode 100644 index 0000000..498d43e --- /dev/null +++ b/src/asset/www/tiles.css @@ -0,0 +1,3 @@ +.asset-tile-0  {background-color: green;} +.asset-tile-1  {background-color: yellow;} +.asset-tile-2  {background-color: red;} diff --git a/src/battlemap/src/Character.elm b/src/battlemap/src/Character.elm index 839c788..3c72c0c 100644 --- a/src/battlemap/src/Character.elm +++ b/src/battlemap/src/Character.elm @@ -5,6 +5,7 @@ module Character exposing        get_ref,        get_team,        get_icon_id, +      get_portrait_id,        get_location,        set_location,        get_movement_points, @@ -36,6 +37,9 @@ get_team c = c.team  get_icon_id : Type -> String  get_icon_id c = c.icon +get_portrait_id : Type -> String +get_portrait_id c = c.portrait +  get_location : Type -> Battlemap.Location.Type  get_location t = t.location diff --git a/src/battlemap/src/Shim/Model.elm b/src/battlemap/src/Shim/Model.elm index 37ef614..a41e81f 100644 --- a/src/battlemap/src/Shim/Model.elm +++ b/src/battlemap/src/Shim/Model.elm @@ -21,9 +21,9 @@ generate =              {                 id = "3",                 name = "Char3", -               icon = "Icon3", +               icon = "3",                 team = 1, -               portrait = "Portrait3", +               portrait = "3",                 location = {x = 3, y = 2},                 movement_points = 2,                 atk_dist = 4 @@ -33,9 +33,9 @@ generate =                 {                    id = "2",                    name = "Char2", -                  icon = "Icon2", +                  icon = "2",                    team = 1, -                  portrait = "Portrait2", +                  portrait = "2",                    location = {x = 2, y = 2},                    movement_points = 3,                    atk_dist = 3 @@ -45,9 +45,9 @@ generate =                    {                       id = "1",                       name = "Char1", -                     icon = "Icon1", +                     icon = "1",                       team = 0, -                     portrait = "Portrait1", +                     portrait = "1",                       location = {x = 1, y = 0},                       movement_points = 4,                       atk_dist = 2 @@ -57,9 +57,9 @@ generate =                       {                          id = "0",                          name = "Char0", -                        icon = "Icon0", +                        icon = "0",                          team = 0, -                        portrait = "Portrait0", +                        portrait = "0",                          location = {x = 0, y = 0},                          movement_points = 5,                          atk_dist = 1 diff --git a/src/battlemap/src/View.elm b/src/battlemap/src/View.elm index 4e23561..b8fae72 100644 --- a/src/battlemap/src/View.elm +++ b/src/battlemap/src/View.elm @@ -23,7 +23,7 @@ view : Model.Type -> (Html.Html Event.Type)  view model =     (Html.div        [ -         (Html.Attributes.class "battlemap") +         (Html.Attributes.class "fullscreen-module")        ]        [           (View.Header.get_html model), diff --git a/src/battlemap/src/View/Battlemap/Navigator.elm b/src/battlemap/src/View/Battlemap/Navigator.elm index b87d986..5e64e2e 100644 --- a/src/battlemap/src/View/Battlemap/Navigator.elm +++ b/src/battlemap/src/View/Battlemap/Navigator.elm @@ -28,13 +28,17 @@ marker_get_html (loc_ref, marker) =           (Html.Attributes.class "battlemap-tiled"),           (Html.Attributes.class              ( -               "asset-marker-icon-" +               "battlemap-"                 ++ -               if (marker == Battlemap.Marker.CanGoTo) -               then -                  "can-go-to" -               else -                  "can-attack" +               ( +                  if (marker == Battlemap.Marker.CanGoTo) +                  then +                     "can-go-to" +                  else +                     "can-attack" +               ) +               ++ +               "-marker"              )           ),           (Html.Events.onClick @@ -89,7 +93,7 @@ path_node_get_html new_dir (curr_loc, prev_dir, curr_nodes) =                    (Html.Attributes.class "battlemap-tiled"),                    (Html.Attributes.class                       ( -                        "asset-path-icon-" +                        "battlemap-path-icon-"                          ++                          (Battlemap.Direction.to_string prev_dir)                          ++ @@ -140,7 +144,7 @@ mark_the_spot loc origin_dir =           (Html.Attributes.class "battlemap-tiled"),           (Html.Attributes.class              ( -               "asset-path-icon-mark" +               "battlemap-path-icon-mark"                 ++                 (Battlemap.Direction.to_string origin_dir)              ) diff --git a/src/battlemap/src/View/Battlemap/Tile.elm b/src/battlemap/src/View/Battlemap/Tile.elm index af5167a..6b37d84 100644 --- a/src/battlemap/src/View/Battlemap/Tile.elm +++ b/src/battlemap/src/View/Battlemap/Tile.elm @@ -24,7 +24,7 @@ get_html tile =              (Html.Attributes.class "battlemap-tile-icon"),              (Html.Attributes.class "battlemap-tiled"),              (Html.Attributes.class -               ("asset-tile-" ++ (toString (Battlemap.Tile.get_icon_id tile))) +               ("asset-tile-" ++ (Battlemap.Tile.get_icon_id tile))              ),              (Html.Events.onClick                 (Event.TileSelected (Battlemap.Location.get_ref tile_loc)) diff --git a/src/battlemap/src/View/Footer/ManualControls.elm b/src/battlemap/src/View/Footer/ManualControls.elm index 83f880f..c56e954 100644 --- a/src/battlemap/src/View/Footer/ManualControls.elm +++ b/src/battlemap/src/View/Footer/ManualControls.elm @@ -38,7 +38,7 @@ get_html : (Html.Html Event.Type)  get_html =     (Html.div        [ -         (Html.Attributes.class "battlemap-footer-manualcontrols") +         (Html.Attributes.class "battlemap-manual-controls")        ]        [           (direction_button Battlemap.Direction.Left "Left"), diff --git a/src/battlemap/src/View/Footer/TabMenu.elm b/src/battlemap/src/View/Footer/TabMenu.elm index 73edf23..967610a 100644 --- a/src/battlemap/src/View/Footer/TabMenu.elm +++ b/src/battlemap/src/View/Footer/TabMenu.elm @@ -8,9 +8,12 @@ import Html.Events  -- Battlemap -------------------------------------------------------------------  import Event +import Error +  import Model  import UI +import Util.Html  import View.Footer.TabMenu.Characters  import View.Footer.TabMenu.Status @@ -43,7 +46,7 @@ get_active_tab_selector_html : UI.Tab -> (Html.Html Event.Type)  get_active_tab_selector_html selected_tab =     (Html.div        [ -         (Html.Attributes.class "battlemap-footer-tabmenu-selector") +         (Html.Attributes.class "battlemap-tabmenu-selector")        ]        (List.map (get_menu_button_html selected_tab) (UI.get_all_tabs))     ) @@ -52,11 +55,25 @@ get_inactive_tab_selector_html : (Html.Html Event.Type)  get_inactive_tab_selector_html =     (Html.div        [ -         (Html.Attributes.class "battlemap-footer-tabmenu-selector") +         (Html.Attributes.class "battlemap-tabmenu-selector")        ]        (List.map (get_basic_button_html) (UI.get_all_tabs))     ) +get_error_message_html : Model.Type -> (Html.Html Event.Type) +get_error_message_html model = +   case model.error of +      (Just error) -> +         (Html.div +            [ +               (Html.Attributes.class "battlemap-tabmenu-error-message") +            ] +            [ +               (Html.text (Error.to_string error)) +            ] +         ) + +      Nothing -> Util.Html.nothing  --------------------------------------------------------------------------------  -- EXPORTED --------------------------------------------------------------------  -------------------------------------------------------------------------------- @@ -64,31 +81,35 @@ get_html : Model.Type -> (Html.Html Event.Type)  get_html model =     (Html.div        [ -         (Html.Attributes.class "battlemap-footer-tabmenu") +         (Html.Attributes.class "battlemap-tabmenu")        ]        ( -         let -            displayed_tab = (UI.try_getting_displayed_tab model.ui) -         in -            case displayed_tab of -               (Just UI.StatusTab) -> -                  [ -                     (get_active_tab_selector_html UI.StatusTab), -                     (View.Footer.TabMenu.Status.get_html model) -                  ] +         (get_error_message_html model) +         :: +         ( +            let +               displayed_tab = (UI.try_getting_displayed_tab model.ui) +            in +               case displayed_tab of +                  (Just UI.StatusTab) -> +                     [ +                        (get_active_tab_selector_html UI.StatusTab), +                        (View.Footer.TabMenu.Status.get_html model) +                     ] -               (Just UI.CharactersTab) -> -                  [ -                     (get_active_tab_selector_html UI.CharactersTab), -                     (View.Footer.TabMenu.Characters.get_html model) -                  ] +                  (Just UI.CharactersTab) -> +                     [ +                        (get_active_tab_selector_html UI.CharactersTab), +                        (View.Footer.TabMenu.Characters.get_html model) +                     ] -               (Just UI.SettingsTab) -> -                  [ -                     (get_active_tab_selector_html UI.SettingsTab), -                     (View.Footer.TabMenu.Settings.get_html model) -                  ] +                  (Just UI.SettingsTab) -> +                     [ +                        (get_active_tab_selector_html UI.SettingsTab), +                        (View.Footer.TabMenu.Settings.get_html model) +                     ] -               Nothing -> [(get_inactive_tab_selector_html)] +                  Nothing -> [(get_inactive_tab_selector_html)] +         )        )     ) diff --git a/src/battlemap/src/View/Footer/TabMenu/Characters.elm b/src/battlemap/src/View/Footer/TabMenu/Characters.elm index 2929dee..79a7f10 100644 --- a/src/battlemap/src/View/Footer/TabMenu/Characters.elm +++ b/src/battlemap/src/View/Footer/TabMenu/Characters.elm @@ -1,11 +1,15 @@  module View.Footer.TabMenu.Characters exposing (get_html)  -- Elm ------------------------------------------------------------------------- +import Dict +  import Html  import Html.Attributes  import Html.Events  -- Battlemap ------------------------------------------------------------------- +import Character +  import Event  import Model @@ -13,6 +17,18 @@ import Model  --------------------------------------------------------------------------------  -- LOCAL -----------------------------------------------------------------------  -------------------------------------------------------------------------------- +get_character_portrait_html : Character.Type -> (Html.Html Event.Type) +get_character_portrait_html char = +   (Html.div +      [ +         (Html.Attributes.class "battlemap-character-portrait"), +         (Html.Attributes.class +            ("asset-char-portrait-" ++ (Character.get_portrait_id char)) +         ) +      ] +      [ +      ] +   )  --------------------------------------------------------------------------------  -- EXPORTED --------------------------------------------------------------------  -------------------------------------------------------------------------------- @@ -20,10 +36,11 @@ get_html : Model.Type -> (Html.Html Event.Type)  get_html model =     (Html.div        [ -         (Html.Attributes.class "battlemap-footer-tabmenu-content"), -         (Html.Attributes.class "battlemap-footer-tabmenu-content-characters") -      ] -      [ -         (Html.text "Not implemented yet.") +         (Html.Attributes.class "battlemap-tabmenu-content"), +         (Html.Attributes.class "battlemap-tabmenu-characters-tab")        ] +      (List.map +         (get_character_portrait_html) +         (Dict.values model.characters) +      )     ) diff --git a/src/battlemap/src/View/Footer/TabMenu/Settings.elm b/src/battlemap/src/View/Footer/TabMenu/Settings.elm index 07115e7..cda43b2 100644 --- a/src/battlemap/src/View/Footer/TabMenu/Settings.elm +++ b/src/battlemap/src/View/Footer/TabMenu/Settings.elm @@ -31,8 +31,8 @@ get_html : Model.Type -> (Html.Html Event.Type)  get_html model =     (Html.div        [ -         (Html.Attributes.class "battlemap-footer-tabmenu-content"), -         (Html.Attributes.class "battlemap-footer-tabmenu-content-settings") +         (Html.Attributes.class "battlemap-tabmenu-content"), +         (Html.Attributes.class "battlemap-tabmenu-settings-tab")        ]        [           (scale_button (0.75) "Zoom -"), diff --git a/src/battlemap/src/View/Footer/TabMenu/Status.elm b/src/battlemap/src/View/Footer/TabMenu/Status.elm index d5b652c..814aaee 100644 --- a/src/battlemap/src/View/Footer/TabMenu/Status.elm +++ b/src/battlemap/src/View/Footer/TabMenu/Status.elm @@ -13,8 +13,6 @@ import Battlemap.Tile  import Character -import Util.Html -  import Error  import Event  import Model @@ -47,7 +45,7 @@ get_error_html : Error.Type -> (Html.Html Event.Type)  get_error_html err =     (Html.div        [ -         (Html.Attributes.class "battlemap-footer-tabmenu-status-error-msg") +         (Html.Attributes.class "battlemap-tabmenu-error-message")        ]        [           (Html.text (Error.to_string err)) @@ -65,7 +63,7 @@ get_tile_info_html model loc =           (Html.div              [                 (Html.Attributes.class -                  "battlemap-footer-tabmenu-content-status-tile-info" +                  "battlemap-tabmenu-tile-info-tab"                 )              ]              [ @@ -113,10 +111,6 @@ get_html model =           (Html.Attributes.class "battlemap-footer-tabmenu-content-status")        ]        [ -         (case model.error of -            (Just error) -> (get_error_html error) -            Nothing -> Util.Html.nothing -         ),           (case model.state of              Model.Default -> (Html.text "Click on a character to control it.")              (Model.FocusingTile tile_loc) -> diff --git a/src/battlemap/src/View/Header.elm b/src/battlemap/src/View/Header.elm index 3a86741..d2bd2da 100644 --- a/src/battlemap/src/View/Header.elm +++ b/src/battlemap/src/View/Header.elm @@ -16,7 +16,7 @@ get_html : Model.Type -> (Html.Html Event.Type)  get_html model =     (Html.div        [ -         (Html.Attributes.class "battlemap-header") +         (Html.Attributes.class "global-ingame-header")        ]        [           (Html.text "Tacticians Online - Development Branch") diff --git a/src/battlemap/www/index.html b/src/battlemap/www/index.html index cad620b..d019783 100644 --- a/src/battlemap/www/index.html +++ b/src/battlemap/www/index.html @@ -1,203 +1,10 @@  <!DOCTYPE html>  <html>     <head> -   <style> -      html -      { -         height: 100%; -      } - -      html, body, .battlemap -      { -         position: absolute; -         top: 0; -         bottom: 0; -         right: 0; -         left: 0; -      } - -      .battlemap -      { -         display: flex; -         flex-flow: column; -         align-content: stretch; -         justify-content: stretch; -      } - -      .battlemap-header -      { -         text-align: center; -         flex: 0; -      } - -      .battlemap-container -      { -         overflow: auto; -         width: inherit; -         flex: 1; -      } - -      .battlemap-footer -      { -         display: flex; -         flex: 0; -         max-height: 30%; -      } - -      .battlemap-actual -      { -         display: inline-block; -      } - -      .battlemap-tiled -      { -         position: absolute; -         height: 32px; -         width: 32px; -      } - -      .battlemap-tile-icon -      { -         z-index: 0; -      } - -      .asset-tile-\"0\" -      { -         background-color: green; -      } - -      .asset-tile-\"1\" -      { -         background-color: yellow; -      } - -      .asset-tile-\"2\" -      { -         background-color: red; -      } - -      .battlemap-character-icon -      { -         z-index: 2; -      } - -      .asset-character-icon-Icon0 -      { -         background-color: Aqua; -      } - -      .asset-character-icon-Icon1 -      { -         background-color: Aquamarine; -      } - -      .asset-character-icon-Icon2 -      { -         background-color: Purple; -      } - -      .asset-character-icon-Icon3 -      { -         background-color: RebeccaPurple; -      } - -      .battlemap-marker-icon -      { -         z-index: 1; -      } - -      .asset-marker-icon-can-go-to -      { -         background-color:rgba(0,0,0,0.5); -      } - -      .asset-marker-icon-can-attack -      { -         background-color:rgba(0,0,0,0.7); -      } - -      .battlemap-path-icon -      { -         z-index: 3; -         color: white; -      } - -      .asset-path-icon-NR:before, -      .asset-path-icon-LR:before, -      .asset-path-icon-RR:before, -      .asset-path-icon-UR:before, -      .asset-path-icon-DR:before -      { -         content: "}"; -      } - -      .asset-path-icon-NL:before, -      .asset-path-icon-LL:before, -      .asset-path-icon-RL:before, -      .asset-path-icon-UL:before, -      .asset-path-icon-DL:before -      { -         content: "{"; -      } - -      .asset-path-icon-NU:before, -      .asset-path-icon-LU:before, -      .asset-path-icon-RU:before, -      .asset-path-icon-UU:before, -      .asset-path-icon-DU:before -      { -         content: "^"; -      } - -      .asset-path-icon-ND:before, -      .asset-path-icon-LD:before, -      .asset-path-icon-RD:before, -      .asset-path-icon-UD:before, -      .asset-path-icon-DD:before -      { -         content: "v"; -      } - -      .asset-path-icon-markN:before, -      .asset-path-icon-markL:before, -      .asset-path-icon-markU:before, -      .asset-path-icon-markD:before, -      .asset-path-icon-markR:before -      { -         content: "x"; -      } - - -      .battlemap-footer-tabmenu -      { -         flex: 1; -      } - -      .battlemap-footer-tabmenu-selector -      { -         display: flex; -         flex-direction: row; -         justify-content: space-between; -      } - -      .battlemap-footer-tabmenu-selector button -      { -         flex: 1; -      } - -      .battlemap-footer-tabmenu-content -      { -         flex: initial; -      } - -      .battlemap-footer-manualcontrols -      { -         flex: initial; - -         display: flex; -         flex-direction: column; -      } -   </style> +      <link rel="stylesheet" type="text/css" href="../global/style.css"> +      <link rel="stylesheet" type="text/css" href="../battlemap/style.css"> +      <link rel="stylesheet" type="text/css" href="../asset/tiles.css"> +      <link rel="stylesheet" type="text/css" href="../asset/characters.css">     </head>     <body>        <script src="script/main.js"></script> diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css new file mode 100644 index 0000000..0404e2b --- /dev/null +++ b/src/battlemap/www/style.css @@ -0,0 +1,111 @@ +.battlemap-container +{ +   overflow: auto; +   width: inherit; +   flex: 1; +} + +.battlemap-footer +{ +   display: flex; +   flex: 0; +   max-height: 30%; +} + +.battlemap-actual +{ +   display: inline-block; +} + +/** Inside the container ******************************************************/ +.battlemap-tiled +{ +   position: absolute; +   height: 32px; +   width: 32px; +} + +.battlemap-tile-icon       {z-index: 0;} +.battlemap-marker-icon     {z-index: 1;} +.battlemap-character-icon  {z-index: 2;} +.battlemap-path-icon       {z-index: 3; color: white;} + +.battlemap-can-go-to-marker   {background-color:rgba(0,0,0,0.5);} +.battlemap-can-attack-marker  {background-color:rgba(0,0,0,0.7);} + +/**** Path Icons **************************************************************/ +.battlemap-path-icon-NR:before, +.battlemap-path-icon-LR:before, +.battlemap-path-icon-RR:before, +.battlemap-path-icon-UR:before, +.battlemap-path-icon-DR:before +{ +   content: "}"; +} + +.battlemap-path-icon-NL:before, +.battlemap-path-icon-LL:before, +.battlemap-path-icon-RL:before, +.battlemap-path-icon-UL:before, +.battlemap-path-icon-DL:before +{ +   content: "{"; +} + +.battlemap-path-icon-NU:before, +.battlemap-path-icon-LU:before, +.battlemap-path-icon-RU:before, +.battlemap-path-icon-UU:before, +.battlemap-path-icon-DU:before +{ +   content: "^"; +} + +.battlemap-path-icon-ND:before, +.battlemap-path-icon-LD:before, +.battlemap-path-icon-RD:before, +.battlemap-path-icon-UD:before, +.battlemap-path-icon-DD:before +{ +   content: "v"; +} + +.battlemap-path-icon-markN:before, +.battlemap-path-icon-markL:before, +.battlemap-path-icon-markU:before, +.battlemap-path-icon-markD:before, +.battlemap-path-icon-markR:before +{ +   content: "x"; +} + +/** Footer ********************************************************************/ +.battlemap-tabmenu +{ +   flex: 1; +} + +.battlemap-manual-controls +{ +   flex: initial; + +   display: flex; +   flex-direction: column; +} +/**** Tabmenu *****************************************************************/ +.battlemap-tabmenu-selector +{ +   display: flex; +   flex-direction: row; +   justify-content: space-between; +} + +.battlemap-tabmenu-selector button +{ +   flex: 1; +} + +.battlemap-tabmenu-content +{ +   flex: initial; +} diff --git a/src/global/Makefile b/src/global/Makefile new file mode 100644 index 0000000..73216f7 --- /dev/null +++ b/src/global/Makefile @@ -0,0 +1,4 @@ +build: + +clean: + diff --git a/src/global/www/style.css b/src/global/www/style.css new file mode 100644 index 0000000..406c60e --- /dev/null +++ b/src/global/www/style.css @@ -0,0 +1,27 @@ +html +{ +   height: 100%; +} + +html, body, .fullscreen-module +{ +   position: absolute; +   top: 0; +   bottom: 0; +   right: 0; +   left: 0; +} + +.fullscreen-module +{ +   display: flex; +   flex-flow: column; +   align-content: stretch; +   justify-content: stretch; +} + +.global-ingame-header +{ +   text-align: center; +   flex: 0; +} | 


