Make mobile styling!

This commit is contained in:
Robbie Antenesse 2019-05-07 17:34:07 -06:00
parent 6c14398521
commit d737ec9944
9 changed files with 296 additions and 29 deletions

View File

@ -68,6 +68,7 @@
<main>
<aside id="sideColumn">
<div id="mobileWordFormShow">+</div>
<form id="wordForm">
<label>Word<span class="red">*</span><br>
<input id="wordName">

View File

@ -10,6 +10,7 @@ export default function setupListeners() {
setupDetailsTabs();
setupSearchBar();
setupWordForm();
setupMobileWordFormButton();
}
function setupDetailsTabs() {
@ -205,6 +206,21 @@ export function setupWordEditFormButtons() {
setupMaximizeButtons();
}
export function setupMobileWordFormButton() {
const mobileButton = document.getElementById('mobileWordFormShow'),
wordForm = document.getElementById('wordForm');
mobileButton.addEventListener('click', () => {
if (mobileButton.innerText === '+') {
wordForm.style.display = 'block';
mobileButton.innerHTML = '&times;&#xFE0E;';
} else {
wordForm.style.display = '';
mobileButton.innerHTML = '+';
}
});
}
export function setupPagination() {
const nextButtons = document.getElementsByClassName('next-button'),
prevButtons = document.getElementsByClassName('prev-button'),

View File

@ -5,6 +5,9 @@
@import 'styles/containers';
@import 'styles/structure';
@import 'styles/elements';
@import 'styles/mobile/containers';
@import 'styles/mobile/structure';
@import 'styles/mobile/elements';
html, body {
font-family: $font;

View File

@ -12,6 +12,7 @@ header {
main {
display: block;
width: 90%;
max-width: 1000px;
min-height: 400px;
margin: 0 auto;

View File

@ -11,6 +11,8 @@ p, span {
label {
display: block;
font-weight: bold;
line-height: 120%;
cursor: pointer;
&:not(:last-child) {
margin-bottom: $general-padding;
@ -39,6 +41,7 @@ label {
}
.tag {
display: inline-block;
padding: 3px 9px;
border: $border;
border-radius: 3px;
@ -71,6 +74,7 @@ span .tag {
.button {
@extend .tag;
cursor: pointer;
user-select: none;
}
.modal {
@ -92,10 +96,6 @@ span .tag {
.modal-content {
position: absolute;
// top: 10%;
// left: 20%;
// bottom: 10%;
// right: 20%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@ -113,6 +113,7 @@ span .tag {
right: 10px;
font-size: 200%;
cursor: pointer;
user-select: none;
}
}
}

View File

@ -1,7 +1,7 @@
#top {
#title {
display: inline-block;
margin: 3px 20px 3px 0;
margin: 3px $general-padding 3px 0;
}
#openSearchModal {
@ -25,7 +25,7 @@
max-height: unset;
margin: 0 auto;
width: 90%;
padding: 20px;
padding: $general-padding $general-padding ($general-padding / 2);
label {
display: inline;
@ -43,6 +43,16 @@
bottom: unset;
right: unset;
background-color: $white;
padding: ($general-padding / 2) $general-padding ($general-padding * 0.25);
font-size: 90%;
.split {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
}
@ -51,6 +61,7 @@
}
.category {
margin-right: 8px;
text-align: right;
* {
margin: 0;
@ -59,22 +70,30 @@
.options {
label {
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
}
}
}
}
#mobileWordFormShow {
display: none;
}
#wordForm {
position: fixed;
top: auto;
width: 24%;
max-width: 275px;
padding: 10px;
background-color: $light;
border: $border;
border-radius: 5px;
max-height: 80%;
overflow-y: auto;
box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
}
.edit-form {
@ -83,16 +102,23 @@
}
#detailsSection {
padding: 20px;
padding: $general-padding;
background-color: $white;
border: $border;
border-radius: 5px;
nav li {
#dictionaryName {
margin-top: 0;
}
nav ul {
padding-left: 0;
li {
display: inline-block;
list-style: none;
margin: 0;
padding: 10px 20px;
padding: 10px $general-padding;
border: $border;
background-color: $light;
cursor: pointer;
@ -111,12 +137,17 @@
background-color: #bababa;
}
}
}
#detailsPanel {
background-color: $white;
padding: 20px;
padding: $general-padding;
max-height: 400px;
overflow-y: auto;
h3 {
margin-top: 0;
}
}
}
@ -130,7 +161,7 @@
}
.pronunciation {
margin: 0 20px;
margin: 0 $general-padding;
}
.part-of-speech {

View File

@ -0,0 +1,39 @@
@media (max-width: 750px) {
html, body {
font-size: 90%;
line-height: 90%;
}
header {
&#top {
margin-bottom: $general-padding;
}
}
main {
#sideColumn {
display: block;
width: 0;
height: block;
margin: 0;
overflow: visible;
}
#mainColumn {
width: 100%;
margin: 0;
}
article {
dl {
padding: 0 ($general-padding / 2);
dd {
margin: 0 ($general-padding * 0.75);
}
}
}
}
}

View File

@ -0,0 +1,90 @@
@media (max-width: 750px) {
.tag {
padding: 2px 6px;
font-size: 90%;
line-height: 120%;
&.small {
font-size: 70%;
line-height: 100%;
}
}
.button {
@extend .tag;
cursor: pointer;
user-select: none;
}
.tabs {
li {
padding: 5px;
}
}
.modal {
z-index: 10;
.modal-content .close-button {
top: 5px;
right: 5px;
}
}
.split {
display: block;
div {
display: block;
margin-right: unset;
&:last-child {
margin-left: unset;
}
}
&.two div,
&.three div,
div.third {
width: 100%;
margin: 10px auto;
}
div.quarter,
div.three-quarter {
display: inline-block;
}
div.quarter {
width: 30%;
}
div.three-quarter {
width: 66%;
}
}
.pagination {
position: relative;
text-align: center;
margin: $general-padding 0;
.page-selector {
padding: 5px 10px;
}
.prev-button,
.next-button {
position: absolute;
}
.prev-button {
left: 2.5%;
}
.next-button {
right: 2.5%;
}
}
}

View File

@ -0,0 +1,85 @@
@media (max-width: 750px) {
#top {
#openSearchModal {
width: 40%;
}
#searchModal {
.modal-content {
width: 100%;
padding: $general-padding ($general-padding / 2) ($general-padding / 4);
#searchBox {
margin-bottom: 5px;
}
section+footer {
padding: ($general-padding / 2) 0;
}
}
}
}
#mobileWordFormShow {
position: fixed;
top: $header-height;
left: 0;
width: 32px;
height: 32px;
display: block;
background-color: #00de00;
border: $border;
border-radius: 0 3px 3px 0;
color: $white;
font-size: 30px;
line-height: 24px;
font-weight: bold;
text-align: center;
cursor: pointer;
z-index: 1;
user-select: none;
}
#wordForm {
display: none;
width: 95%;
max-width: unset;
top: $header-height + 32px;
left: 0;
right: 3%;
z-index: 1;
}
#detailsSection {
nav ul li {
padding: 5px 10px;
}
#detailsPanel {
max-height: 300px;
}
}
.entry {
.pronunciation {
margin: 0 ($general-padding / 2);
}
}
#editModal {
$nav-font-height: 16px;
footer {
.button {
font-size: $nav-font-height - 2px;
line-height: $nav-font-height;
}
}
#editDescription {
width: 100%;
height: 260px;
}
}
}