voterunner

commit

331f46469fad154da0b368c82e3927e9a50b3f6d

parent

158f2b95d79e4a68bdd0406ca2acf9b11b1e0e1a

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2020-10-18 08:15

simplify layout

Diffstat

2 files changed, 38 insertions, 53 deletions

diff --git a/index.html b/index.html

@@ -13,28 +13,24 @@
   13    13 		<h1><span class="logo1">vote</span>runner</h1>
   14    14 	</header>
   15    15 
   16    -1 	<div><div>
   17    -1 		<div id="sidebar">
   18    -1 			<div class="user">
   19    -1 				<div class="bar">
   20    -1 					<div class="user__delegation bar__item bar__item--grow">(no delegation)</div>
   21    -1 					<span class="user__votes bar__item bar__item--right" title="number of votes of you and all your followers">1</span>
   22    -1 					<button class="user__undelegate bar__item bar__item--button bar__item--right" title="revoke delegation">&#10134;</button>
   23    -1 				</div>
   24    -1 				<div class="bar">
   25    -1 					<button title="remove your opinion" class="user__rm bar__item bar__item--button bar__item--right">&#10060;</button>
   26    -1 					<div class="user__name bar__item bar__item--grow">
   27    -1 						<input type="text" placeholder="<enter your name>" />
   28    -1 					</div>
   29    -1 				</div>
   30    -1 				<div class="user__comment">
   31    -1 					<textarea autocomplete="off"></textarea>
   32    -1 				</div>
   -1    16 	<div class="user">
   -1    17 		<div class="bar">
   -1    18 			<div class="user__delegation bar__item bar__item--grow">(no delegation)</div>
   -1    19 			<span class="user__votes bar__item bar__item--right" title="number of votes of you and all your followers">1</span>
   -1    20 			<button class="user__undelegate bar__item bar__item--button bar__item--right" title="revoke delegation">&#10134;</button>
   -1    21 		</div>
   -1    22 		<div class="bar">
   -1    23 			<button title="remove your opinion" class="user__rm bar__item bar__item--button bar__item--right">&#10060;</button>
   -1    24 			<div class="user__name bar__item bar__item--grow">
   -1    25 				<input type="text" placeholder="<enter your name>" />
   33    26 			</div>
   34    27 		</div>
   -1    28 		<div class="user__comment">
   -1    29 			<textarea autocomplete="off"></textarea>
   -1    30 		</div>
   -1    31 	</div>
   35    32 
   36    -1 		<div id="tree"></div>
   37    -1 	</div></div>
   -1    33 	<div id="tree"></div>
   38    34 
   39    35 	<script type="text/javascript" src="/voterunner.js"></script>
   40    36 </body>

diff --git a/scss/layout.scss b/scss/layout.scss

@@ -7,21 +7,6 @@ body {
    7     7 	margin: 0 auto;
    8     8 	padding: 0 $padding;
    9     9 	position: relative;
   10    -1 
   11    -1 	> div {
   12    -1 		padding: 3em 0 1em;
   13    -1 		height: 100%;
   14    -1 		min-height: 37em;  // 33 + padding
   15    -1 
   16    -1 		> div {
   17    -1 			position: relative;
   18    -1 			height: 100%;
   19    -1 			min-height: 33em;
   20    -1 		}
   21    -1 	}
   22    -1 }
   23    -1 
   24    -1 .voterunner body {
   25    10 	max-width: 80em;
   26    11 }
   27    12 
@@ -30,10 +15,6 @@ body > header {
   30    15 	text-align: center;
   31    16 	border-radius: 0 0 $padding $padding;
   32    17 	margin: 0;
   33    -1 	position: absolute;
   34    -1 	top: 0;
   35    -1 	left: $padding;
   36    -1 	right: $padding;
   37    18 
   38    19 	h1 {
   39    20 		margin: 0;
@@ -46,6 +27,12 @@ body > header {
   46    27 	}
   47    28 }
   48    29 
   -1    30 body > header,
   -1    31 #tree,
   -1    32 .user {
   -1    33 	margin-bottom: $padding;
   -1    34 }
   -1    35 
   49    36 #tree,
   50    37 .user,
   51    38 .node__body {
@@ -62,28 +49,30 @@ body > header {
   62    49 #tree {
   63    50 	background: $color-bg;
   64    51 	padding: $padding;
   65    -1 	margin-top: $padding;
   66    52 }
   67    53 
   68    54 @media screen and (min-width: 40em) {
   69    -1 	html {
   70    -1 		overflow: auto;
   -1    55 	body {
   -1    56 		display: grid;
   -1    57 		grid-template-rows: min-content 1fr;
   -1    58 		grid-template-columns: 3fr 2fr;
   -1    59 		grid-gap: $padding;
   -1    60 	}
   -1    61 
   -1    62 	body > header {
   -1    63 		grid-row: 1;
   -1    64 		grid-column: 1 / 3;
   71    65 	}
   72    66 
   73    67 	#tree {
   74    -1 		position: absolute;
   75    -1 		top: 0;
   76    -1 		left: 0;
   77    -1 		width: 57%;
   78    -1 		height: 100%;
   79    -1 		overflow: auto;
   80    -1 		margin-top: 0;
   -1    68 		grid-row: 2;
   -1    69 		grid-column: 1;
   -1    70 		overflow-y: auto;
   81    71 	}
   82    72 
   83    -1 	#sidebar {
   84    -1 		position: absolute;
   85    -1 		top: 0;
   86    -1 		right: 0;
   87    -1 		width: 42%;
   -1    73 	.user {
   -1    74 		grid-row: 2;
   -1    75 		grid-column: 2;
   -1    76 		align-self: flex-start;
   88    77 	}
   89    78 }