christofsteel/syng-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

footer with name, search append for mobile

Browse source
This commit is contained in:
Christoph Stahl 2022-11-24 19:34:29 +01:00
parent 204d6f737e
commit 218b382586
6 changed files with 38 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/App.vue
View file

@ -24,6 +24,7 @@ onMounted(() => { window.addEventListener("resize", (e) => { state.value.is_smal
function setRoomCode(room) { state.value.room = room } function setRoomCode(room) { state.value.room = room }
function setName(name) { state.value.name = name } function setName(name) { state.value.name = name }
function updateName(evt) { state.value.name = evt.target.textContent }
function setServer(server) { state.value.server = server } function setServer(server) { state.value.server = server }
function setSearchTerm(searchTerm) { state.value.search.searchTerm = searchTerm } function setSearchTerm(searchTerm) { state.value.search.searchTerm = searchTerm }
@ -71,45 +72,36 @@ function joinRoom() {
<template> <template>
<div class="page"> <div class="page">
<div class="row" id="main-content"> <div class="row" id="main-content">
<MobileLayout v-show="state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" /> <MobileLayout v-show="state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
<DesktopLayout v-show="!state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" /> <DesktopLayout v-show="!state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
<WelcomeReveal v-if="!state.joined" :room="state.room" :server="state.server" @connect="connect" @update:room="setRoomCode" @update:name="setName" @update:server="setServer" /> <WelcomeReveal v-if="!state.joined" :room="state.room" :server="state.server" @connect="connect" @update:room="setRoomCode" @update:name="setName" @update:server="setServer" />
</div>
</div> </div>
<footer>
Name: <span class="userName" @focusout="updateName" contenteditable>{{ state.name }}</span>
</footer>
</div>
</template> </template>
<style scoped> <style scoped>
.page { footer {
height: 100vh; position: fixed;
position: relative; bottom: 0;
} height: 50px;
#main-content { line-height: 50px;
height: 100vh; width: 100%;
max-height: 100vh; padding-left: 10px;
max-width: 100vw; background-color: #008000;
} font-weight: bold;
</style> color: #ffffff;
<style> font-size: 1.5rem;
.row { margin: auto;
margin:0 !important;
max-width: 100% !important;
} }
body { footer > .userName {
background: url(../syng.png) fixed; border: none;
background-color: #8a8a8a; border-bottom: 1px dashed #00F000;
background-size: auto 50%; background-color: #008000;
background-repeat: no-repeat;
background-position: center;
height:100vh;
}
.vsplit {
display: flex;
height: 100%;
flex-direction: column;
}
#large-current, #current, .button, button:focus {
background-color: #008000;
} }
</style> </style>

14
src/assets/main.css
View file

@ -14,7 +14,7 @@ body {
} }
.page { .page {
height: 100vh; height: 100%;
position: relative; position: relative;
} }
@ -32,7 +32,7 @@ body {
.splitter { .splitter {
display: flex; display: flex;
height: 100vh; height: 100%;
} }
.comp-column { .comp-column {
@ -54,7 +54,7 @@ body {
#main-content { #main-content {
height: 100vh; height: calc(100vh - 50px);
max-height: 100vh; max-height: 100vh;
max-width: 100vw; max-width: 100vw;
} }
@ -71,7 +71,7 @@ body {
.vsplit { .vsplit {
display: flex; display: flex;
height: 100%; height: calc(100% - 60px);
flex-direction: column; flex-direction: column;
} }
@ -80,6 +80,10 @@ body {
overflow-y: auto; overflow-y: auto;
} }
#recent {
flex-direction: column-reverse;
}
.performer, .album { .performer, .album {
font-size: smaller; font-size: smaller;
font-style: italic; font-style: italic;
@ -158,7 +162,7 @@ body {
} }
body { body {
background: url(../syng.png) fixed; background: url(syng.png) fixed;
background-color: #8a8a8a; background-color: #8a8a8a;
background-size: auto 50%; background-size: auto 50%;
background-repeat: no-repeat; background-repeat: no-repeat;

BIN
src/assets/syng.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 43 KiB

2
src/components/RecentDesktop.vue
View file

@ -6,6 +6,6 @@ const props = defineProps(['recent'])
<template> <template>
<div class="comp-column" id="right-side"> <div class="comp-column" id="right-side">
<div class="header">Recent</div> <div class="header">Recent</div>
<RecentInner :state="recent" /> <RecentInner :recent="recent" />
</div> </div>
</template> </template>

2
src/components/RecentInner.vue
View file

@ -6,7 +6,7 @@ const props = defineProps(['recent'])
<template> <template>
<div class="vsplit"> <div class="vsplit">
<div id="recent-list-wrapper" class="results"> <div id="recent-list-wrapper" class="results">
<ul id="last10" class="vertical menu"> <ul id="recent" class="vertical menu">
<Entry v-for="entry in recent" :entry="entry" /> <Entry v-for="entry in recent" :entry="entry" />
</ul> </ul>
</div> </div>

2
src/components/SearchTab.vue
View file

@ -10,7 +10,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append'])
<div class="tabs-panel is-active" id="simplesearch"> <div class="tabs-panel is-active" id="simplesearch">
<div class="vsplit"> <div class="vsplit">
<SearchBar :searchTerm="search.searchTerm" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" /> <SearchBar :searchTerm="search.searchTerm" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
<SearchResults :searchResults="search.searchResults" /> <SearchResults :searchResults="search.searchResults" @append="(entry) => $emit('append', entry)" />
</div> </div>
</div> </div>
</template> </template>