NeilBrommer/NewTabPage
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Better handle small screen sizes

Browse source
This commit is contained in:
Neil Brommer 2017-12-09 11:10:03 -08:00
parent d5c68cd237
commit d86fbae8ed
2 changed files with 44 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -17,7 +17,7 @@
<body> <body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
<!-- <a class="navbar-brand" href=".">Start</a >--> <!-- <a class="navbar-brand" href=".">Start</a >-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
@ -28,10 +28,10 @@
<!-- Keep this to push elements to the right --> <!-- Keep this to push elements to the right -->
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="form-inline mt-2 mt-md-0">
<button class="btn btn-light ml-sm-2" type="button" data-Toggle="modal" data-target="#aboutModal">About</button> <button class="btn btn-light ml-2" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
<button class="btn btn-light ml-sm-2" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button> <button class="btn btn-light ml-2" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
<button id="btnEdit" class="btn btn-light ml-sm-2" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button> <button id="btnEdit" class="btn btn-light ml-2" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button>
<button class="btn btn-light ml-sm-2" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fa fa-exclamation-circle"></span> Add</button> <button class="btn btn-light ml-2" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fa fa-exclamation-circle"></span> Add</button>
</form> </form>
</div> </div>
</nav> </nav>

69
main.css
View file

@ -2,14 +2,10 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: white no-repeat center center fixed; background: white no-repeat center center fixed;
background-size: cover; background-size: cover;
tab-size: 4; tab-size: 4;
-moz-tab-size: 4; -moz-tab-size: 4;
}
#wrapper {
width: 60%;
} }
.card-header { .card-header {
@ -27,43 +23,56 @@ body {
} }
.card { .card {
border: 0px; border: 0px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }
.navbar { .navbar {
background: transparent !important; background: transparent !important;
}
/* set the width of the main container based on element width */
@media (max-width: 34em) {
#wrapper {
width: 90%;
}
}
@media (min-width: 34em) {
#wrapper {
width: 60%;
}
} }
/* change the number of columns in card-columns */ /* change the number of columns in card-columns */
@media (min-width: 34em) { @media (min-width: 34em) {
.card-columns { .card-columns {
-webkit-column-count: 1; -webkit-column-count: 1;
-moz-column-count: 1; -moz-column-count: 1;
column-count: 1; column-count: 1;
} }
} }
@media (min-width: 48em) { @media (min-width: 48em) {
.card-columns { .card-columns {
-webkit-column-count: 1; -webkit-column-count: 1;
-moz-column-count: 1; -moz-column-count: 1;
column-count: 1; column-count: 1;
} }
} }
@media (min-width: 62em) { @media (min-width: 62em) {
.card-columns { .card-columns {
-webkit-column-count: 2; -webkit-column-count: 2;
-moz-column-count: 2; -moz-column-count: 2;
column-count: 2; column-count: 2;
} }
} }
@media (min-width: 75em) { @media (min-width: 75em) {
.card-columns { .card-columns {
-webkit-column-count: 2; -webkit-column-count: 2;
-moz-column-count: 2; -moz-column-count: 2;
column-count: 2; column-count: 2;
} }
} }