Remove sidebar wrapper div.
This commit is contained in:
parent
b95f89c4c2
commit
055ba5caff
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- TODO: move all class toggling to vue, since vue clears existing classes when changing the notified class -->
|
|
||||||
<div id="viewport" :class="viewportClasses" role="tablist">
|
<div id="viewport" :class="viewportClasses" role="tablist">
|
||||||
<Sidebar :networks="networks" :active-channel="activeChannel" />
|
<Sidebar :networks="networks" :active-channel="activeChannel" :overlay="$refs.overlay" />
|
||||||
|
<div id="sidebar-overlay" ref="overlay" @click="$root.setSidebar(false)" />
|
||||||
<article id="windows">
|
<article id="windows">
|
||||||
<Chat
|
<Chat
|
||||||
v-if="activeChannel"
|
v-if="activeChannel"
|
||||||
|
@ -1,70 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<aside id="sidebar" ref="sidebar">
|
||||||
<aside id="sidebar" ref="sidebar">
|
<div class="scrollable-area">
|
||||||
<div class="scrollable-area">
|
<div class="logo-container">
|
||||||
<div class="logo-container">
|
<img
|
||||||
<img
|
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
|
||||||
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
|
class="logo"
|
||||||
class="logo"
|
alt="The Lounge"
|
||||||
alt="The Lounge"
|
/>
|
||||||
/>
|
<img
|
||||||
<img
|
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
|
||||||
:src="
|
class="logo-inverted"
|
||||||
`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`
|
alt="The Lounge"
|
||||||
"
|
/>
|
||||||
class="logo-inverted"
|
|
||||||
alt="The Lounge"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<NetworkList :networks="networks" :active-channel="activeChannel" />
|
|
||||||
</div>
|
</div>
|
||||||
<footer id="footer">
|
<NetworkList :networks="networks" :active-channel="activeChannel" />
|
||||||
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
|
</div>
|
||||||
><button
|
<footer id="footer">
|
||||||
class="icon sign-in"
|
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
|
||||||
data-target="#sign-in"
|
><button
|
||||||
data-component="SignIn"
|
class="icon sign-in"
|
||||||
aria-label="Sign in"
|
data-target="#sign-in"
|
||||||
role="tab"
|
data-component="SignIn"
|
||||||
aria-controls="sign-in"
|
aria-label="Sign in"
|
||||||
aria-selected="false"
|
role="tab"
|
||||||
/></span>
|
aria-controls="sign-in"
|
||||||
<span
|
aria-selected="false"
|
||||||
class="tooltipped tooltipped-n tooltipped-no-touch"
|
/></span>
|
||||||
|
<span
|
||||||
|
class="tooltipped tooltipped-n tooltipped-no-touch"
|
||||||
|
aria-label="Connect to network"
|
||||||
|
><button
|
||||||
|
class="icon connect"
|
||||||
|
data-target="#connect"
|
||||||
|
data-component="Connect"
|
||||||
aria-label="Connect to network"
|
aria-label="Connect to network"
|
||||||
><button
|
role="tab"
|
||||||
class="icon connect"
|
aria-controls="connect"
|
||||||
data-target="#connect"
|
aria-selected="false"
|
||||||
data-component="Connect"
|
/></span>
|
||||||
aria-label="Connect to network"
|
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
|
||||||
role="tab"
|
><button
|
||||||
aria-controls="connect"
|
class="icon settings"
|
||||||
aria-selected="false"
|
data-target="#settings"
|
||||||
/></span>
|
data-component="Settings"
|
||||||
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
|
aria-label="Settings"
|
||||||
><button
|
role="tab"
|
||||||
class="icon settings"
|
aria-controls="settings"
|
||||||
data-target="#settings"
|
aria-selected="false"
|
||||||
data-component="Settings"
|
/></span>
|
||||||
aria-label="Settings"
|
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
|
||||||
role="tab"
|
><button
|
||||||
aria-controls="settings"
|
class="icon help"
|
||||||
aria-selected="false"
|
data-target="#help"
|
||||||
/></span>
|
data-component="Help"
|
||||||
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
|
aria-label="Help"
|
||||||
><button
|
role="tab"
|
||||||
class="icon help"
|
aria-controls="help"
|
||||||
data-target="#help"
|
aria-selected="false"
|
||||||
data-component="Help"
|
/></span>
|
||||||
aria-label="Help"
|
</footer>
|
||||||
role="tab"
|
</aside>
|
||||||
aria-controls="help"
|
|
||||||
aria-selected="false"
|
|
||||||
/></span>
|
|
||||||
</footer>
|
|
||||||
</aside>
|
|
||||||
<div id="sidebar-overlay" ref="overlay" @click="$root.setSidebar(false)" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -78,6 +73,7 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
activeChannel: Object,
|
activeChannel: Object,
|
||||||
networks: Array,
|
networks: Array,
|
||||||
|
overlay: HTMLElement,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.touchStartPos = null;
|
this.touchStartPos = null;
|
||||||
@ -146,7 +142,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.$refs.sidebar.style.transform = "translate3d(" + distX + "px, 0, 0)";
|
this.$refs.sidebar.style.transform = "translate3d(" + distX + "px, 0, 0)";
|
||||||
this.$refs.overlay.style.opacity = distX / this.menuWidth;
|
this.overlay.style.opacity = distX / this.menuWidth;
|
||||||
};
|
};
|
||||||
|
|
||||||
this.onTouchEnd = () => {
|
this.onTouchEnd = () => {
|
||||||
@ -165,7 +161,7 @@ export default {
|
|||||||
this.$store.commit("sidebarDragging", false);
|
this.$store.commit("sidebarDragging", false);
|
||||||
|
|
||||||
this.$refs.sidebar.style.transform = null;
|
this.$refs.sidebar.style.transform = null;
|
||||||
this.$refs.overlay.style.opacity = null;
|
this.overlay.style.opacity = null;
|
||||||
|
|
||||||
this.touchStartPos = null;
|
this.touchStartPos = null;
|
||||||
this.touchCurPos = null;
|
this.touchCurPos = null;
|
||||||
|
@ -422,7 +422,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// const storage = require("../../js/localStorage"); // TODO: use this
|
|
||||||
import socket from "../../js/socket";
|
import socket from "../../js/socket";
|
||||||
import RevealPassword from "../RevealPassword.vue";
|
import RevealPassword from "../RevealPassword.vue";
|
||||||
import Session from "../Session.vue";
|
import Session from "../Session.vue";
|
||||||
|
Loading…
Reference in New Issue
Block a user