Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change scrollbar design

Browse Source
This commit is contained in:
kPherox 2019-05-22 13:29:28 +09:00
parent a7c09009a7
commit 8286602d62
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D
6 changed files with 69 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/index.html
View File

@ -1,16 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<style>
html {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #607d8b;
}
</style>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but thedesk doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but thedesk doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

9
src/components/Main.vue
View File

@ -46,15 +46,18 @@ export default class Main extends Vue {
<style lang="postcss"> <style lang="postcss">
#main { #main {
display: flex;
flex-direction: column;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow-x: hidden; overflow: hidden;
} }
#timelines { #timelines {
display: flex; display: flex;
width: 100%; width: 100%;
height: calc(100vh - 40px); flex: 1;
overflow-x: scroll; overflow-x: auto;
overflow-y: hidden;
} }
#toolbar { #toolbar {
width: 100vw; width: 100vw;

14
src/components/Timeline/Column.vue
View File

@ -3,8 +3,10 @@
<div class="header"> <div class="header">
<div class="tl-name">{{name}}</div> <div class="tl-name">{{name}}</div>
</div> </div>
<div class="toot-box">
<Toot v-for="[id,status] in statuses" :key="id" :status="status" :pref-static="pref.static"/> <Toot v-for="[id,status] in statuses" :key="id" :status="status" :pref-static="pref.static"/>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -116,10 +118,11 @@ export default class Column extends Vue {
<style scoped lang="postcss"> <style scoped lang="postcss">
.timeline { .timeline {
display: flex;
flex-direction: column;
height: 100%; height: 100%;
flex: 1; flex: 1;
overflow-y: scroll; overflow: hidden;
overflow-x: hidden;
& + .timeline { & + .timeline {
border-left: solid 1px; border-left: solid 1px;
@ -127,7 +130,6 @@ export default class Column extends Vue {
} }
.header { .header {
position: sticky;
top: 0; top: 0;
background-color: var(--header); background-color: var(--header);
filter: brightness(110%); filter: brightness(110%);
@ -136,5 +138,11 @@ export default class Column extends Vue {
height: 60px; height: 60px;
} }
} }
.toot-box {
flex: 1;
overflow-x: hidden;
overflow-y: scroll;
}
} }
</style> </style>

7
src/components/globals/BaseOverlay.vue
View File

@ -38,6 +38,8 @@ export default class BaseOverlay extends Vue {
opacity: 0; opacity: 0;
} }
.overlay { .overlay {
display: flex;
flex-direction: column;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@ -49,9 +51,8 @@ export default class BaseOverlay extends Vue {
} }
.overlay-inner { .overlay-inner {
margin: 0.5em; margin: 0.5em;
height: calc(100% - 50px - 1em); flex: 1;
overflow: auto;
overflow: scroll;
} }
.close-button { .close-button {
position: fixed; position: fixed;

19
src/views/About.vue
View File

@ -122,23 +122,14 @@ export default class About extends Vue {
</script> </script>
<style lang="postcss"> <style lang="postcss">
body {
margin: 0;
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-app-region: drag;
user-select: none;
}
a {
color: #36c;
text-decoration: none;
}
#about { #about {
padding: 0.5em; padding: 0.5em;
text-align: center; text-align: center;
height: 100vh; height: calc(100vh - 1em);
color: var(--color); color: var(--color);
background-color: var(--bg-color); background-color: var(--bg-color);
-webkit-app-region: drag;
user-select: none;
} }
#brand { #brand {
margin-top: 0.5em; margin-top: 0.5em;
@ -158,6 +149,10 @@ a {
margin: 0; margin: 0;
} }
} }
a {
color: #36c;
text-decoration: none;
}
dl.version { dl.version {
margin: 0; margin: 0;
display: grid; display: grid;

10
src/views/App.vue
View File

@ -67,16 +67,6 @@ export default class App extends Vue {
</script> </script>
<style> <style>
html {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
#app { #app {
color: var(--color); color: var(--color);
background-color: var(--bg-color); background-color: var(--bg-color);