Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

cleanup, fix some things, try to disable scrollbars on mobile

Browse source
This commit is contained in:
Henry Jameson 2022-04-08 10:17:23 +03:00
parent c71cf72eea
commit 6109fab14e
5 changed files with 18 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/App.scss
View file

@ -116,7 +116,7 @@ nav {
#content { #content {
overscroll-behavior-y: none; overscroll-behavior-y: none;
overflow-y: auto; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
position: sticky; position: sticky;
} }
@ -198,19 +198,23 @@ nav {
margin-left: -2em; margin-left: -2em;
padding-left: 2.5em; padding-left: 2.5em;
&:not(.-show-scrollbar) { // Only show custom scrollbars on devices which
scrollbar-width: none; // have a cursor/pointer to operate them
margin-right: -2em; @media (pointer: fine) {
padding-right: 2.5em; &:not(.-show-scrollbar) {
scrollbar-width: none;
margin-right: -2em;
padding-right: 2.5em;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: block; display: block;
width: 0; width: 0;
}
} }
}
.panel-heading.-sticky { .panel-heading.-sticky {
top: -10px; top: -10px;
}
} }
} }
} }

2
src/App.vue
View file

@ -41,8 +41,8 @@
<router-view /> <router-view />
</div> </div>
<div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/> <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
<media-modal />
</div> </div>
<media-modal />
<shout-panel <shout-panel
v-if="currentUser && shout && !hideShoutbox" v-if="currentUser && shout && !hideShoutbox"
:floating="true" :floating="true"

9
src/components/chat/chat.scss
View file

@ -133,18 +133,9 @@
.chat-view-heading { .chat-view-heading {
box-sizing: border-box; box-sizing: border-box;
position: static; position: static;
z-index: 9999;
top: 0; top: 0;
margin-top: 0; margin-top: 0;
border-radius: 0; border-radius: 0;
/* This practically overlays the panel heading color over panel background
* color. This is needed because we allow transparent panel background and
* it doesn't work well in this "disjointed panel header" case
*/
background:
linear-gradient(to top, var(--panel), var(--panel)),
linear-gradient(to top, var(--bg), var(--bg));
height: 50px; height: 50px;
} }

2
src/components/media_modal/media_modal.vue
View file

@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
$modal-view-button-icon-margin: 0.5em; $modal-view-button-icon-margin: 0.5em;
.modal-view.media-modal-view { .modal-view.media-modal-view {
z-index: 1001; z-index: 9000;
flex-direction: column; flex-direction: column;
.modal-view-button-arrow, .modal-view-button-arrow,

2
src/components/modal/modal.vue
View file

@ -35,7 +35,7 @@ export default {
<style lang="scss"> <style lang="scss">
.modal-view { .modal-view {
z-index: 1000; z-index: 2000;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;