Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sidebar and Content the same height

Browse Source
This commit is contained in:
reverend 2020-08-05 18:38:17 +02:00
parent 33c8b302b3
commit 8f7e03cda9
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/05_Pages/_pages.scss
View File

@ -1,18 +1,19 @@
$-sidebar-width: 250px; $-sidebar-width: 250px;
.LP-Main{ .LP-Main{
display: flex; display: table;
flex-direction: row-reverse; flex-direction: row-reverse;
height: calc(100% - 61px); height: calc(100% - 61px);
.LP-Main__Content{ .LP-Main__Content{
flex-grow: 1; display: table-cell;
width: calc(100% -300px); width: calc(100% -300px);
min-height: 1px; min-height: 1px;
padding: 25px;
} }
.LP-Main__Sidebar{ .LP-Main__Sidebar{
flex-shrink: 0; display: table-cell;
width: $-sidebar-width; width: $-sidebar-width;
flex-grow: 0; flex-grow: 0;
height: 100%; height: 100%;

6
components/05_Pages/placeDetail/placeDetail.hbs
View File

@ -1,9 +1,9 @@
{{> @header}} {{> @header}}
<article class="LP-Main"> <article class="LP-Main">
<section class="LP-Main__Content">
</section>
<section class="LP-Main__Sidebar"> <section class="LP-Main__Sidebar">
{{> @navigation modifier='--sidebar'}} {{> @navigation modifier='--sidebar'}}
</section> </section>
<section class="LP-Main__Content">
{{> @placeoverview}}
</section>
</article> </article>

14
public/components.css
View File

@ -280,7 +280,8 @@ body {
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:hover { .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:hover {
border-right: 2px solid #C09F80; border-right: 2px solid #C09F80;
position: relative; position: relative;
background-color: #D7CEC7; } background-color: #D7CEC7;
color: #76323F; }
@media (max-width: 750px) { @media (max-width: 750px) {
.LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List { .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List {
@ -373,7 +374,7 @@ body {
margin-top: 12px; } margin-top: 12px; }
.LP-LinkList__List .LP-LinkList__Item .LP-Link { .LP-LinkList__List .LP-LinkList__Item .LP-Link {
padding: 1em 0 1em 1em; padding: 1em 0 1em 1em;
width: calc(100% - $-link-padding); width: calc(100% - 1em);
display: block; display: block;
color: #565656; } color: #565656; }
.LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized { .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized {
@ -516,15 +517,16 @@ body {
padding: 0; } } padding: 0; } }
.LP-Main { .LP-Main {
display: flex; display: table;
flex-direction: row-reverse; flex-direction: row-reverse;
height: calc(100% - 61px); } height: calc(100% - 61px); }
.LP-Main .LP-Main__Content { .LP-Main .LP-Main__Content {
flex-grow: 1; display: table-cell;
width: calc(100% -300px); width: calc(100% -300px);
min-height: 1px; } min-height: 1px;
padding: 25px; }
.LP-Main .LP-Main__Sidebar { .LP-Main .LP-Main__Sidebar {
flex-shrink: 0; display: table-cell;
width: 250px; width: 250px;
flex-grow: 0; flex-grow: 0;
height: 100%; } height: 100%; }