More work on the mobile interface.
Begin toying with a hamburger menu. Remove many redundant CSS definitions.
This commit is contained in:
Sage Vaillancourt
parent
0ee4b3df40
commit
233afb75eb
|
|
@ -294,9 +294,15 @@ section {
|
|||
.query-settings {
|
||||
overflow: scroll;
|
||||
}
|
||||
.mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 719px) {
|
||||
.desktop {
|
||||
display: none !important;
|
||||
}
|
||||
section {
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<NavBar />
|
||||
|
||||
<div class="corner">
|
||||
<div class="desktop corner">
|
||||
<!--
|
||||
{#if testMode}
|
||||
<div class="error-display">TEST MODE ENABLED</div>
|
||||
|
|
@ -59,66 +59,6 @@
|
|||
object-fit: contain;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
--background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 3em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: var(--background);
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 3em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
background: var(--background);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
li.active::before {
|
||||
--size: 6px;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - var(--size));
|
||||
border: var(--size) solid transparent;
|
||||
border-top: var(--size) solid var(--accent-color);
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding: 0 1em;
|
||||
color: var(--heading-color);
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s linear;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<script>
|
||||
import { page } from '$app/stores';
|
||||
|
||||
let dropdownVisible = false
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<nav class="desktop">
|
||||
<svg viewBox="0 0 2 3" aria-hidden="true">
|
||||
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
|
||||
</svg>
|
||||
<ul>
|
||||
<ul class="desktop">
|
||||
<li class:active={$page.url.pathname === '/'}>
|
||||
<a sveltekit:prefetch href="/">Topic Search</a>
|
||||
</li>
|
||||
|
|
@ -24,44 +26,37 @@
|
|||
</svg>
|
||||
</nav>
|
||||
|
||||
<nav class="mobile">
|
||||
<button style="font-size: 3rem;" on:click={() => dropdownVisible = !dropdownVisible}>{dropdownVisible ? 'x' : '≡'}</button>
|
||||
{#if dropdownVisible}
|
||||
<ul class="mobile">
|
||||
<li class:active={$page.url.pathname === '/'}>
|
||||
<a sveltekit:prefetch href="/">Topic Search</a>
|
||||
</li>
|
||||
<!--
|
||||
<li class:active={$page.url.pathname === '/post-message'}>
|
||||
<a sveltekit:prefetch href="/post-message">Post Message</a>
|
||||
</li>
|
||||
-->
|
||||
<li class:active={$page.url.pathname === '/settings'}>
|
||||
<a sveltekit:prefetch href="/settings">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.corner {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: black;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.corner a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.corner span {
|
||||
margin-top: 0.45em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.corner img {
|
||||
margin-left: 0.5em;
|
||||
height: 2em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
--background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
nav.mobile {
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 3em;
|
||||
|
|
@ -72,7 +67,7 @@
|
|||
fill: var(--background);
|
||||
}
|
||||
|
||||
ul {
|
||||
ul.desktop {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -85,6 +80,20 @@
|
|||
background-size: contain;
|
||||
}
|
||||
|
||||
ul.mobile {
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
padding: 128px 0 0;
|
||||
margin: 0;
|
||||
height: 3em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
background: var(--background);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
@ -120,4 +129,14 @@
|
|||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
button {
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
font-size: 64px;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// noinspection JSCheckFunctionSignatures
|
||||
|
||||
import { get, writable } from 'svelte/store'
|
||||
import { writable } from 'svelte/store'
|
||||
import { backendAddressAndPort, queryMode, queryState } from './constants.js'
|
||||
|
||||
const getRandomFromArray = array => array[Math.floor(Math.random() * array.length)]
|
||||
|
|
|
|||
|
|
@ -177,6 +177,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
{/if}
|
||||
|
||||
<div class="data-view-container">
|
||||
|
|
@ -226,6 +227,17 @@
|
|||
</section>
|
||||
|
||||
<style>
|
||||
hr {
|
||||
width: 60%;
|
||||
border-style: solid;
|
||||
margin-bottom: 1.5em;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.data-view {
|
||||
border-top: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue