diff options
Diffstat (limited to 'src/App.vue')
| -rw-r--r-- | src/App.vue | 113 |
1 files changed, 87 insertions, 26 deletions
diff --git a/src/App.vue b/src/App.vue index 3b8623ad..e1f6b4a5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,51 +1,112 @@ <template> - <div id="app" v-bind:style="bgAppStyle"> - <div class="app-bg-wrapper" v-bind:style="bgStyle"></div> + <div + id="app" + :style="bgAppStyle" + > + <div + class="app-bg-wrapper" + :style="bgStyle" + /> <MobileNav v-if="isMobileLayout" /> - <nav v-else class='nav-bar container' @click="scrollToTop()" id="nav"> - <div class='logo' :style='logoBgStyle'> - <div class='mask' :style='logoMaskStyle'></div> - <img :src='logo' :style='logoStyle'> + <nav + v-else + id="nav" + class="nav-bar container" + @click="scrollToTop()" + > + <div + class="logo" + :style="logoBgStyle" + > + <div + class="mask" + :style="logoMaskStyle" + /> + <img + :src="logo" + :style="logoStyle" + > </div> - <div class='inner-nav'> - <div class='item'> - <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link> + <div class="inner-nav"> + <div class="item"> + <router-link + class="site-name" + :to="{ name: 'root' }" + active-class="home" + > + {{ sitename }} + </router-link> </div> - <div class='item right'> - <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder> - <router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link> - <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a> + <div class="item right"> + <user-finder + class="button-icon nav-icon mobile-hidden" + @toggled="onFinderToggled" + /> + <router-link + class="mobile-hidden" + :to="{ name: 'settings'}" + > + <i + class="button-icon icon-cog nav-icon" + :title="$t('nav.preferences')" + /> + </router-link> + <a + v-if="currentUser" + href="#" + class="mobile-hidden" + @click.prevent="logout" + ><i + class="button-icon icon-logout nav-icon" + :title="$t('login.logout')" + /></a> </div> </div> </nav> - <div v-if="" class="container" id="content"> - <div class="sidebar-flexer mobile-hidden" v-if="!isMobileLayout"> + <div + id="content" + class="container" + > + <div + v-if="!isMobileLayout" + class="sidebar-flexer mobile-hidden" + > <div class="sidebar-bounds"> <div class="sidebar-scroller"> <div class="sidebar"> - <user-panel></user-panel> - <nav-panel></nav-panel> - <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel> - <features-panel v-if="!currentUser && showFeaturesPanel"></features-panel> - <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel> - <notifications v-if="currentUser"></notifications> + <user-panel /> + <nav-panel /> + <instance-specific-panel v-if="showInstanceSpecificPanel" /> + <features-panel v-if="!currentUser && showFeaturesPanel" /> + <who-to-follow-panel v-if="currentUser && suggestionsEnabled" /> + <notifications v-if="currentUser" /> </div> </div> </div> </div> <div class="main"> - <div v-if="!currentUser" class="login-hint panel panel-default"> - <router-link :to="{ name: 'login' }" class="panel-body"> + <div + v-if="!currentUser" + class="login-hint panel panel-default" + > + <router-link + :to="{ name: 'login' }" + class="panel-body" + > {{ $t("login.hint") }} </router-link> </div> <transition name="fade"> - <router-view></router-view> + <router-view /> </transition> </div> - <media-modal></media-modal> + <media-modal /> </div> - <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel> + <chat-panel + v-if="currentUser && chat" + :floating="true" + class="floating-chat mobile-hidden" + /> </div> </template> |