Skip to content

Commit

Permalink
[ui] make header layout a bit more compact
Browse files Browse the repository at this point in the history
  • Loading branch information
@nroutasuo
nroutasuo committed Mar 16, 2023
1 parent d5bbd75 commit e3cb599
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 143 deletions.
80 changes: 31 additions & 49 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ body {
}
#unit-main,
#footer {
padding-left: 90px;
padding-left: 85px;
}
#header-side {
position: fixed;
width: 60px;
width: 65px;
z-index: 5;
margin-left: -90px;
margin-left: -85px;
}
#log {
max-width: 244px;
Expand Down Expand Up @@ -1917,13 +1917,20 @@ body.dark .lvl13-fade-down {
background: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, #202220 100%);
background: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, #202220 100%);
}
body.dark #header-camp-container {
display: flex;
}
body.dark .header-row {
padding: 3px 5px;
}
body.dark .header-section {
display: inline-block;
vertical-align: top;
margin: 0px 5px 0px 0px;
float: left;
padding: 0px 2px;
}
body.dark #header-bag-storage,
body.dark #bag-resources {
display: inline-block;
}
body.dark #main-header-camp {
width: 100%;
display: flex;
Expand All @@ -1934,30 +1941,14 @@ body.dark #main-header-camp-overview {
body.dark #main-header-camp-resources {
flex-grow: 1;
}
body.dark #main-header-bag {
min-width: 20%;
max-width: 25%;
}
body.dark #main-header-equipment {
max-height: 122px;
text-align: center;
padding: 2px;
}
body.dark #main-header-items {
min-width: 35px;
max-width: 35%;
}
body.dark #header-tribe-container {
margin-bottom: 5px;
padding-left: 5px;
}
body.dark #grid-switch-content {
z-index: 1;
position: relative;
}
body.dark #grid-main-header .unit {
padding: 2px;
position: relative;
}
body.dark #statsbar-resources {
width: 100%;
display: flex;
Expand All @@ -1977,14 +1968,14 @@ body.dark #header-self-bar {
}
body.dark #header-self-bar ul {
margin-top: 10px;
margin-bottom: 10px;
}
body.dark #header-self-bar > span {
display: block;
}
body.dark #header-self-bar .stats-indicator {
margin: 1px 0px;
width: 100%;
max-width: 60px;
line-height: 1em;
}
body.dark #header-self-bar .callout-container {
Expand All @@ -2003,7 +1994,7 @@ body.dark #header-self-bar .change-indicator {
margin: 0.2em 0 0 0.25em;
}
body.dark #header-self-bar div.callout-arrow-up {
margin: 0 0 0 23px;
margin: 0 0 0 25.5px;
}
body.dark .stats-indicator-secondary {
display: flex;
Expand Down Expand Up @@ -2055,7 +2046,7 @@ body.dark #notification-player .progress {
height: 1.25em;
}
body.dark #footer {
padding: 1px 5px 1px 90px;
padding: 1px 5px 1px 85px;
display: flex;
align-items: flex-end;
height: 100%;
Expand Down Expand Up @@ -4116,13 +4107,20 @@ body.sunlit .lvl13-fade-down {
background: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, #fbfbfb 100%);
background: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, #fbfbfb 100%);
}
body.sunlit #header-camp-container {
display: flex;
}
body.sunlit .header-row {
padding: 3px 5px;
}
body.sunlit .header-section {
display: inline-block;
vertical-align: top;
margin: 0px 5px 0px 0px;
float: left;
padding: 0px 2px;
}
body.sunlit #header-bag-storage,
body.sunlit #bag-resources {
display: inline-block;
}
body.sunlit #main-header-camp {
width: 100%;
display: flex;
Expand All @@ -4133,30 +4131,14 @@ body.sunlit #main-header-camp-overview {
body.sunlit #main-header-camp-resources {
flex-grow: 1;
}
body.sunlit #main-header-bag {
min-width: 20%;
max-width: 25%;
}
body.sunlit #main-header-equipment {
max-height: 122px;
text-align: center;
padding: 2px;
}
body.sunlit #main-header-items {
min-width: 35px;
max-width: 35%;
}
body.sunlit #header-tribe-container {
margin-bottom: 5px;
padding-left: 5px;
}
body.sunlit #grid-switch-content {
z-index: 1;
position: relative;
}
body.sunlit #grid-main-header .unit {
padding: 2px;
position: relative;
}
body.sunlit #statsbar-resources {
width: 100%;
display: flex;
Expand All @@ -4176,14 +4158,14 @@ body.sunlit #header-self-bar {
}
body.sunlit #header-self-bar ul {
margin-top: 10px;
margin-bottom: 10px;
}
body.sunlit #header-self-bar > span {
display: block;
}
body.sunlit #header-self-bar .stats-indicator {
margin: 1px 0px;
width: 100%;
max-width: 60px;
line-height: 1em;
}
body.sunlit #header-self-bar .callout-container {
Expand All @@ -4202,7 +4184,7 @@ body.sunlit #header-self-bar .change-indicator {
margin: 0.2em 0 0 0.25em;
}
body.sunlit #header-self-bar div.callout-arrow-up {
margin: 0 0 0 23px;
margin: 0 0 0 25.5px;
}
body.sunlit .stats-indicator-secondary {
display: flex;
Expand Down Expand Up @@ -4254,7 +4236,7 @@ body.sunlit #notification-player .progress {
height: 1.25em;
}
body.sunlit #footer {
padding: 1px 5px 1px 90px;
padding: 1px 5px 1px 85px;
display: flex;
align-items: flex-end;
height: 100%;
Expand Down
38 changes: 13 additions & 25 deletions css/modules/elements-special.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,23 @@ span.msg-count, span.time, span.msg-camp-level {

// MAIN HEADER (RESOURCE, STATS ETC)

#header-camp-container {
display: flex;
}

.header-row {
padding: 3px 5px;
}

.header-section {
display: inline-block;
vertical-align: top;
margin: 0px 5px 0px 0px;
float: left;
padding: 0px 2px;
}

#header-bag-storage, #bag-resources {
display: inline-block;
}

#main-header-camp {
width: 100%;
display: flex;
Expand All @@ -72,36 +81,16 @@ span.msg-count, span.time, span.msg-camp-level {
flex-grow: 1;
}

#main-header-bag {
min-width: 20%;
max-width: 25%;
}

#main-header-equipment {
max-height: 122px;
text-align: center;
padding: 2px;
}

#main-header-items {
min-width: 35px;
max-width: 35%;
}

#header-tribe-container {
margin-bottom: 5px;
padding-left: 5px;
}

#grid-switch-content {
z-index: 1;
position: relative;
}

#grid-main-header .unit {
padding: 2px;
position: relative;
}

#statsbar-resources {
width: 100%;
display: flex;
Expand All @@ -126,7 +115,6 @@ span.msg-count, span.time, span.msg-camp-level {

#header-self-bar ul {
margin-top: 10px;
margin-bottom: 10px;
}

#header-self-bar > span {
Expand Down
4 changes: 2 additions & 2 deletions css/modules/layout.less
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Base page layout including log, sticky footer etc

@header-side-width: 60px;
@header-side-space: @header-side-width + 30px;
@header-side-width: 65px;
@header-side-space: @header-side-width + 20px;
@footer-height: 65px;

html {
Expand Down
94 changes: 45 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
</div>

<div class="grid" id="grid-main-header" class="vision-container">
<div class="unit whole lvl13-box-1 header-section" id="header-tribe-container">
<div class="unit whole lvl13-box-1 header-row" id="header-tribe-container">
<div id="statsbar-self" class="statsbar">
<div id="stats-evidence" class="stats-indicator">
<span class="label">Evidence</span>
Expand All @@ -93,59 +93,55 @@
</div>
</div>

<div class="unit whole lvl13-box-1" id="header-camp-container">

<div class="header-section" id="main-header-bag">
<div id="header-bag-storage" class="stats-indicator">
<span class="label">Bag capacity</span>
<span class="value">0</span>
/
<span class="value-total">0</span>
</div>
<div id="header-bag-currency" class="stats-indicator">
<span class="label">Silver</span>
<span class="value">0</span>
</div>
<div id="bag-resources" class="statsbar"></div>
</div>

<div class="header-section" id="main-header-equipment">
<ul class="itemlist" id="list-header-equipment"></ul>
</div>

<div class="header-section" id="main-header-items">
<ul class="itemlist" id="list-header-followers"></ul>
<ul class="itemlist" id="list-header-items"></ul>
</div>
<div class="unit whole lvl13-box-1 header-row" id="header-camp-container">

<div class="header-section" id="main-header-camp">
<div class="header-section" id="main-header-camp-overview">
<div id="header-camp-storage" class="stats-indicator">
<span class="label">Storage</span>
<span class="value">0</span>
</div>
<div id="header-camp-reputation" class="stats-indicator">
<span class="label">Reputation</span>
<span class="value">0</span>
<span id="reputation-change-indicator" class="change-indicator"></span>
</div>
<div id="header-camp-population" class="stats-indicator">
<span class="label">Population</span>
<span class="value">0</span>
<span id="population-change-indicator" class="change-indicator"></span>
</div>
<div id="header-camp-currency" class="stats-indicator">
<span class="label">Silver</span>
<span class="value">0</span>
</div>
<div class="header-section" id="main-header-bag">
<div id="header-bag-storage" class="stats-indicator">
<span class="label">Bag capacity</span>
<span class="value">0</span>
/
<span class="value-total">0</span>
</div>
<div id="header-bag-currency" class="stats-indicator">
<span class="label">Silver</span>
<span class="value">0</span>
</div>
<div id="bag-resources" class="statsbar"></div>
<ul class="itemlist" id="list-header-items"></ul>
</div>
<div class="header-section" id="main-header-camp-resources">
<div id="statsbar-resources" class="statsbar">

<div class="header-section" id="main-header-items">
<ul class="itemlist" id="list-header-followers"></ul>
</div>

<div class="header-section" id="main-header-camp">
<div class="header-section" id="main-header-camp-overview">
<div id="header-camp-storage" class="stats-indicator">
<span class="label">Storage</span>
<span class="value">0</span>
</div>
<div id="header-camp-reputation" class="stats-indicator">
<span class="label">Reputation</span>
<span class="value">0</span>
<span id="reputation-change-indicator" class="change-indicator"></span>
</div>
<div id="header-camp-population" class="stats-indicator">
<span class="label">Population</span>
<span class="value">0</span>
<span id="population-change-indicator" class="change-indicator"></span>
</div>
<div id="header-camp-currency" class="stats-indicator">
<span class="label">Silver</span>
<span class="value">0</span>
</div>
</div>
<div class="header-section" id="main-header-camp-resources">
<div id="statsbar-resources" class="statsbar">
</div>
</div>
</div>

</div>

</div>
</div><!-- grid for the whole stats bar -->

<div class="grid">
Expand Down
Loading

0 comments on commit e3cb599

Please sign in to comment.