Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Add button to trigger the site information modal from

Browse source
This commit is contained in:
Oliver-Akins 2021-04-01 00:32:44 -06:00
parent e93dedc91b
commit 71cb9fa46e
1 changed files with 32 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/App.vue
View file

@ -10,12 +10,26 @@
v-if="show_theme_modal" v-if="show_theme_modal"
@close="show_theme_modal = false" @close="show_theme_modal = false"
/> />
<SiteInfo
v-if="show_site_info"
@close="show_site_info = false"
/>
<div id="info-button">
<button @click.stop="show_site_info = true">
<Icon
type="info"
:size="35"
:inner-size="35"
primary="--button-text"
/>
</button>
</div>
<div id="theme-button"> <div id="theme-button">
<button @click="show_theme_modal = true"> <button @click.stop="show_theme_modal = true">
<Icon <Icon
type="palette" type="palette"
:size="30" :size="35"
:inner-size="30" :inner-size="35"
primary="--button-text" primary="--button-text"
/> />
</button> </button>
@ -28,7 +42,8 @@
import "./js/prototypes.js"; import "./js/prototypes.js";
// Import components // Import components
import ThemePicker from './components/modals/ThemeModal'; import ThemePicker from './components/modals/ThemeModal.vue';
import SiteInfo from './components/modals/SiteInfo.vue';
import LoginCard from './components/LoginView.vue'; import LoginCard from './components/LoginView.vue';
import MainView from './components/MainView.vue'; import MainView from './components/MainView.vue';
import Icon from './components/Icon.vue'; import Icon from './components/Icon.vue';
@ -40,9 +55,11 @@ export default {
"MainView": MainView, "MainView": MainView,
"Themes": ThemePicker, "Themes": ThemePicker,
"Icon": Icon, "Icon": Icon,
"SiteInfo": SiteInfo,
}, },
data() {return { data() {return {
show_theme_modal: false show_theme_modal: false,
show_site_info: false,
}}, }},
computed: { computed: {
is_dev() { is_dev() {
@ -111,4 +128,14 @@ body {
#theme-button > button { #theme-button > button {
padding: 5px; padding: 5px;
} }
#info-button {
position: absolute;
display: block;
bottom: 5px;
left: 5px;
}
#info-button > button {
padding: 5px;
}
</style> </style>