tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extra styling for the button

Browse Source
This commit is contained in:
Tamius Han 2020-12-04 00:26:39 +01:00
parent d4947571a4
commit 3fd432f432
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/popup/App.vue
View File

@ -10,15 +10,19 @@
Build channel: {{BrowserDetect.processEnvChannel}} Build channel: {{BrowserDetect.processEnvChannel}}
</div> </div>
</div> </div>
<div v-if="narrowPopup" class="w100 text-center show-more"> <div
<a v-show="!sideMenuVisible" href="#" @click="toggleSideMenu(true)">More options</a> v-if="narrowPopup"
class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
@click="toggleSideMenu()"
>
<Icon icon="list" /><div>Menu</div>
</div> </div>
<div class="flex flex-row body no-overflow flex-grow"> <div class="flex flex-row body no-overflow flex-grow">
<!-- TABS/SIDEBAR --> <!-- TABS/SIDEBAR -->
<div id="tablist" <div id="tablist"
v-show="!narrowPopup || sideMenuVisible" v-show="!narrowPopup || sideMenuVisible"
class="flex flex-column flex-nogrow flex-noshrink h100" class="flex flex-column flex-nogrow flex-noshrink h100"
:class="{'w100': narrowPopup}"
> >
<div class="menu-item" <div class="menu-item"
:class="{'selected-tab': selectedTab === 'global'}" :class="{'selected-tab': selectedTab === 'global'}"
@ -179,6 +183,7 @@
</template> </template>
<script> <script>
import Icon from '../common/components/Icon.vue'
import WhatsNewPanel from './panels/WhatsNewPanel.vue'; import WhatsNewPanel from './panels/WhatsNewPanel.vue';
import SiteDetailsPanel from './panels/SiteDetailsPanel.vue'; import SiteDetailsPanel from './panels/SiteDetailsPanel.vue';
import Donate from '../common/misc/Donate.vue'; import Donate from '../common/misc/Donate.vue';
@ -278,7 +283,7 @@ export default {
AboutPanel, AboutPanel,
Donate, Donate,
SiteDetailsPanel, SiteDetailsPanel,
WhatsNewPanel, WhatsNewPanel, Icon
}, },
methods: { methods: {
async sleep(t) { async sleep(t) {
@ -503,7 +508,7 @@ export default {
this.selectedSite = host; this.selectedSite = host;
}, },
toggleSideMenu(visible) { toggleSideMenu(visible) {
console.warn('toggling side menu visible to:', visible ?? !this.sideMenuVisible ) console.warn('toggling side menu visible to:', visible ?? !this.sideMenuVisible, "arg:", visible )
this.sideMenuVisible = visible ?? !this.sideMenuVisible; this.sideMenuVisible = visible ?? !this.sideMenuVisible;
} }
} }
@ -625,6 +630,7 @@ html {
background-color: initial; background-color: initial;
border-left: #f0c089 3px solid !important; border-left: #f0c089 3px solid !important;
} }
.tabitem-selected::before { .tabitem-selected::before {
padding-right: 8px; padding-right: 8px;
} }
@ -638,6 +644,13 @@ html {
padding-left: 0.33em; padding-left: 0.33em;
} }
.menu-button {
margin-bottom: 4px;
padding: 4px;
border-bottom: #f18810 1px solid !important;
font-size: 1.5rem !important;
}
.popup { .popup {
// max-width: 780px; // max-width: 780px;
// width: 800px; // width: 800px;