Skip to content

Commit 407dc64

Browse files
committed
Add fluid layout
1 parent 93addcb commit 407dc64

File tree

1 file changed

+33
-41
lines changed

1 file changed

+33
-41
lines changed

home.html

+33-41
Original file line numberDiff line numberDiff line change
@@ -94,38 +94,46 @@
9494
#log {
9595
flex-grow: 1;
9696
font-family: "Roboto Mono", "Courier", "Lucida Grande", Verdana, sans-serif;
97-
background: #DAE3E3;
98-
margin: 15px 15px 0px;
97+
background-color: #DAE3E3;
98+
margin: 15px 15px 10px;
9999
padding: 8px 10px;
100100
overflow-y: auto;
101101
}
102102

103-
#footer {
104-
flex-shrink: 0;
105-
display: flex;
106-
align-items: center;
103+
#footer {
104+
display: flex;
105+
flex-wrap: wrap;
107106
justify-content: space-between;
108-
margin: 10px 15px 10px;
109-
overflow: hidden;
107+
margin: 0px 15px 0px;
110108
}
111109

112-
#form {
113-
display: inline-block;
110+
#form {
111+
display: flex;
112+
flex-grow: 1;
113+
margin-bottom: 15px;
114114
}
115115

116-
#export {
117-
float: right;
118-
margin-left: auto;
116+
#input {
117+
flex-grow: 1;
118+
}
119+
120+
#secondary-controls div {
121+
display: inline-block;
122+
padding: 10px 15px;
119123
}
120124

121125
#autoscroll,
122126
#list {
123-
margin-left: 10px;
124127
vertical-align: middle;
125128
width: 20px;
126129
height: 20px;
127130
}
128131

132+
133+
#export {
134+
margin-bottom: 15px;
135+
}
136+
129137
.button {
130138
background-color: #b5c8c9;
131139
border: 1px solid #b5c8c9;
@@ -167,26 +175,6 @@
167175
outline: none;
168176
}
169177

170-
/*
171-
@media screen and (max-width: 950px) {
172-
#form {
173-
max-width: 60%;
174-
}
175-
176-
#input {
177-
max-width: 55%;
178-
}
179-
}
180-
@media screen and (max-width: 825px) {
181-
.buttons {
182-
flex-direction: column;
183-
}
184-
185-
#log {
186-
bottom: 7em;
187-
}
188-
189-
} */
190178
</style>
191179
</head>
192180
<body>
@@ -195,15 +183,19 @@
195183
<div id="footer">
196184
<form id="form">
197185
<input type="submit" class="button" value="Send" />
198-
<input type="text" id="input" class="textfield" size="64" />
186+
<input type="text" id="input" class="textfield" />
199187
</form>
200-
<div id="options">
201-
<input name="pause" type="checkbox" checked id="autoscroll" />
202-
<label for="autoscroll">Autoscroll</label>
203-
<input name="list" type="checkbox" checked id="list" />
204-
<label for="list">List&nbsp;Command&nbsp;Enabled</label>
188+
<div id="secondary-controls">
189+
<div>
190+
<input name="pause" type="checkbox" checked id="autoscroll" />
191+
<label for="autoscroll">Autoscroll</label>
192+
</div>
193+
<div>
194+
<input name="list" type="checkbox" checked id="list" />
195+
<label for="list">List&nbsp;Command&nbsp;Enabled</label>
196+
</div>
197+
<button id="export" class="button">Export&nbsp;Log</button>
205198
</div>
206-
<button id="export" class="button">Export&nbsp;Log</button>
207199
</div>
208200
</div>
209201
</body>

0 commit comments

Comments
 (0)