Page MenuHomePhorge
Files F85805600

No OneTemporary
Actions

Size
8 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 35a57d9fe4..9755ac5905 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -1,114 +1,109 @@
.DesktopNav {
width: 100%;
z-index: var(--ZI_navbar);
input {
color: var(--inputTopbarText, var(--inputText));
}
.inner-nav {
display: grid;
grid-template-rows: var(--navbar-height);
- grid-template-columns: 2fr auto 2fr;
+ grid-template-columns: minmax(5em, 1fr) auto minmax(5em, 1fr);
grid-template-areas: "sitename logo actions";
box-sizing: border-box;
padding: 0 1.2em;
margin: auto;
max-width: 980px;
}
&.-column-stretch .inner-nav {
--miniColumn: 25rem;
--maxiColumn: 45rem;
--columnGap: 1em;
max-width:
calc(
var(--sidebarColumnWidth, var(--miniColumn)) +
var(--contentColumnWidth, var(--maxiColumn)) +
var(--columnGap)
);
}
&.-logoLeft .inner-nav {
- grid-template-columns: auto 2fr 2fr;
+ grid-template-columns: auto minmax(5em, 1fr) minmax(5em, 1fr);
grid-template-areas: "logo sitename actions";
}
&.-column-stretch.-wide .inner-nav {
max-width:
calc(
var(--sidebarColumnWidth, var(--miniColumn)) +
var(--contentColumnWidth, var(--maxiColumn)) +
var(--notifsColumnWidth, var(--miniColumn)) +
var(--columnGap)
);
}
.button-default {
&,
svg {
color: var(--text);
}
}
.logo {
grid-area: logo;
position: relative;
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 100ms;
@media all and (width >= 800px) {
/* stylelint-disable-next-line declaration-no-important */
opacity: 1 !important;
}
.mask {
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: var(--text);
position: absolute;
inset: 0;
}
img {
display: inline-block;
height: var(--navbar-height);
}
}
.nav-icon {
margin-left: 0.2em;
width: 2em;
height: 100%;
text-align: center;
}
.sitename {
grid-area: sitename;
}
.actions {
grid-area: actions;
+ justify-content: flex-end;
+ text-align: right;
+ z-index: 1;
}
.item {
- flex: 1;
line-height: var(--navbar-height);
height: var(--navbar-height);
- overflow: hidden;
display: flex;
- flex-wrap: wrap;
-
- &.right {
- justify-content: flex-end;
- text-align: right;
- }
}
.spacer {
- width: 1em;
+ min-width: 1em;
}
}
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index a75f8506d2..8c7f589b68 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -1,96 +1,98 @@
<template>
<nav
id="nav"
class="DesktopNav"
:class="{ '-logoLeft': logoLeft }"
@click="scrollToTop()"
>
<div class="inner-nav">
<div class="item sitename">
<router-link
v-if="!hideSitename"
class="site-name"
:to="{ name: 'root' }"
active-class="home"
>
{{ sitename }}
</router-link>
</div>
<router-link
class="logo"
:to="{ name: 'root' }"
:style="logoBgStyle"
:title="sitename"
>
<div
class="mask"
:style="logoMaskStyle"
/>
<img
:src="logo"
:style="logoStyle"
>
</router-link>
<div class="item right actions">
- <search-bar
+ <SearchBar
v-if="currentUser || !privateMode"
@toggled="onSearchBarToggled"
@click.stop
/>
- <button
- class="button-unstyled nav-icon"
- :title="$t('nav.preferences')"
- @click.stop="openSettingsModal('user')"
- >
- <FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="cog"
- />
- </button>
- <button
- v-if="currentUser && currentUser.role === 'admin'"
- class="button-unstyled nav-icon"
- target="_blank"
- :title="$t('nav.administration')"
- @click.stop="openSettingsModal('admin')"
- >
- <FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="tachometer-alt"
- />
- </button>
- <span class="spacer" />
- <button
- v-if="currentUser"
- class="button-unstyled nav-icon"
- :title="$t('login.logout')"
- @click.stop.prevent="logout"
- >
- <FAIcon
- fixed-width
- class="fa-scale-110 fa-old-padding"
- icon="sign-out-alt"
- />
- </button>
+ <template v-if="searchBarHidden">
+ <button
+ class="button-unstyled nav-icon"
+ :title="$t('nav.preferences')"
+ @click.stop="openSettingsModal('user')"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="cog"
+ />
+ </button>
+ <button
+ v-if="currentUser && currentUser.role === 'admin'"
+ class="button-unstyled nav-icon"
+ target="_blank"
+ :title="$t('nav.administration')"
+ @click.stop="openSettingsModal('admin')"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="tachometer-alt"
+ />
+ </button>
+ <span class="spacer" />
+ <button
+ v-if="currentUser"
+ class="button-unstyled nav-icon"
+ :title="$t('login.logout')"
+ @click.stop.prevent="logout"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 fa-old-padding"
+ icon="sign-out-alt"
+ />
+ </button>
+ </template>
</div>
</div>
<teleport to="#modal">
<confirm-modal
v-if="showingConfirmLogout"
:title="$t('login.logout_confirm_title')"
:confirm-danger="true"
:confirm-text="$t('login.logout_confirm_accept_button')"
:cancel-text="$t('login.logout_confirm_cancel_button')"
@accepted="doLogout"
@cancelled="hideConfirmLogout"
>
{{ $t('login.logout_confirm') }}
</confirm-modal>
</teleport>
</nav>
</template>
<script src="./desktop_nav.js"></script>
<style src="./desktop_nav.scss" lang="scss"></style>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index d06b4e77d5..9a9c971fb4 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,91 +1,85 @@
<template>
<div
class="SearchBar"
:class="{ '-expanded': !hidden }"
>
<button
v-if="hidden"
class="button-unstyled nav-icon"
:title="$t('nav.search')"
type="button"
:aria-expanded="!hidden"
@click.prevent.stop="toggleHidden"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="search"
/>
</button>
<template v-else>
<input
id="search-bar-input"
ref="searchInput"
v-model="searchTerm"
class="input search-bar-input"
:placeholder="$t('nav.search')"
type="text"
@keyup.enter="find(searchTerm)"
>
<button
class="button-default search-button"
type="submit"
:title="$t('nav.search')"
@click="find(searchTerm)"
>
<FAIcon
fixed-width
icon="search"
/>
</button>
<button
class="button-unstyled cancel-search"
type="button"
:title="$t('nav.search_close')"
:aria-expanded="!hidden"
@click.prevent.stop="toggleHidden"
>
<FAIcon
fixed-width
icon="times"
class="cancel-icon fa-scale-110 fa-old-padding"
/>
</button>
- <span class="spacer" />
- <span class="spacer" />
</template>
</div>
</template>
<script src="./search_bar.js"></script>
<style lang="scss">
.SearchBar {
- display: inline-flex;
+ display: flex;
align-items: baseline;
vertical-align: baseline;
justify-content: flex-end;
- &.-expanded {
- width: 100%;
- }
-
.search-bar-input,
.search-button {
- height: 29px;
+ height: 2em;
}
.search-bar-input {
flex: 1 0 auto;
}
.cancel-search {
height: 50px;
}
.cancel-icon {
color: var(--text);
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Sun, Oct 11, 4:48 PM (1 d, 18 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1785889
Default Alt Text
(8 KB)

Event Timeline