mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2024-12-13 21:19:45 +01:00
Layout tweaks
This commit is contained in:
parent
eb97868465
commit
8a73c02344
12
package-lock.json
generated
12
package-lock.json
generated
@ -10119,7 +10119,7 @@
|
|||||||
},
|
},
|
||||||
"finalhandler": {
|
"finalhandler": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
"resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
|
||||||
"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
|
"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -11167,7 +11167,7 @@
|
|||||||
},
|
},
|
||||||
"got": {
|
"got": {
|
||||||
"version": "9.6.0",
|
"version": "9.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
|
"resolved": "http://registry.npmjs.org/got/-/got-9.6.0.tgz",
|
||||||
"integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
|
"integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -11511,7 +11511,7 @@
|
|||||||
},
|
},
|
||||||
"http-errors": {
|
"http-errors": {
|
||||||
"version": "1.7.2",
|
"version": "1.7.2",
|
||||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
|
"resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
|
||||||
"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
|
"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -14687,7 +14687,7 @@
|
|||||||
},
|
},
|
||||||
"media-typer": {
|
"media-typer": {
|
||||||
"version": "0.3.0",
|
"version": "0.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
"resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||||
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
|
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@ -17926,7 +17926,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"http-errors": {
|
"http-errors": {
|
||||||
"version": "1.6.3",
|
"version": "1.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
|
"resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
|
||||||
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
|
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -19051,7 +19051,7 @@
|
|||||||
},
|
},
|
||||||
"through": {
|
"through": {
|
||||||
"version": "2.3.8",
|
"version": "2.3.8",
|
||||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
"resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||||
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
|
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
@ -1,116 +0,0 @@
|
|||||||
.ftIconButton {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconButton {
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
-moz-transition: background 0.2s ease-out;
|
|
||||||
-o-transition: background 0.2s ease-out;
|
|
||||||
transition: background 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow {
|
|
||||||
box-shadow: 0 1px 2px rgba(0,0,0,.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconButton:hover {
|
|
||||||
-moz-transition: background 0.2s ease-in;
|
|
||||||
-o-transition: background 0.2s ease-in;
|
|
||||||
transition: background 0.2s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base {
|
|
||||||
background-color: var(--card-bg-color);
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.base:hover {
|
|
||||||
background-color: var(--side-nav-hover-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.base:active {
|
|
||||||
background-color: var(--side-nav-active-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: var(--text-with-main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary:hover {
|
|
||||||
background-color: var(--primary-color-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary:active {
|
|
||||||
background-color: var(--primary-color-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary {
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
color: var(--text-with-accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary:hover {
|
|
||||||
background-color: var(--accent-color-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary:active {
|
|
||||||
background-color: var(--accent-color-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconDropdown {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
list-style-type: none;
|
|
||||||
z-index: 100;
|
|
||||||
margin-top: 45px;
|
|
||||||
font-size: 12px;
|
|
||||||
box-shadow: 0 1px 2px rgba(0,0,0,.5);
|
|
||||||
background-color: var(--card-bg-color);
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconDropdown p {
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
-moz-transition: background 0.2s ease-out;
|
|
||||||
-o-transition: background 0.2s ease-out;
|
|
||||||
transition: background 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconDropdown p:hover {
|
|
||||||
background-color: var(--side-nav-hover-color);
|
|
||||||
-moz-transition: background 0.2s ease-in;
|
|
||||||
-o-transition: background 0.2s ease-in;
|
|
||||||
transition: background 0.2s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconDropdown p:active {
|
|
||||||
background-color: var(--side-nav-active-color);
|
|
||||||
-moz-transition: background 0.1s ease-in;
|
|
||||||
-o-transition: background 0.1s ease-in;
|
|
||||||
transition: background 0.1s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconDropdown p a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
right: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
85
src/renderer/components/ft-icon-button/ft-icon-button.sass
Normal file
85
src/renderer/components/ft-icon-button/ft-icon-button.sass
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
.ftIconButton
|
||||||
|
display: flex
|
||||||
|
flex-flow: row wrap
|
||||||
|
justify-content: space-evenly
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.iconButton
|
||||||
|
width: 1em
|
||||||
|
height: 1em
|
||||||
|
padding: 10px
|
||||||
|
font-size: 20px
|
||||||
|
border-radius: 50%
|
||||||
|
cursor: pointer
|
||||||
|
transition: background 0.15s ease-out
|
||||||
|
|
||||||
|
&.shadow
|
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,.5)
|
||||||
|
|
||||||
|
&.base
|
||||||
|
background-color: var(--card-bg-color)
|
||||||
|
color: var(--primary-text-color)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--side-nav-hover-color)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background-color: var(--side-nav-active-color)
|
||||||
|
|
||||||
|
&.primary
|
||||||
|
background-color: var(--primary-color)
|
||||||
|
color: var(--text-with-main-color)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--primary-color-hover)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background-color: var(--primary-color-active)
|
||||||
|
|
||||||
|
&.secondary
|
||||||
|
background-color: var(--accent-color)
|
||||||
|
color: var(--text-with-accent-color)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--accent-color-hover)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background-color: var(--accent-color-active)
|
||||||
|
|
||||||
|
.iconDropdown
|
||||||
|
position: absolute
|
||||||
|
text-align: center
|
||||||
|
list-style-type: none
|
||||||
|
z-index: 100
|
||||||
|
margin-top: 45px
|
||||||
|
font-size: 12px
|
||||||
|
box-shadow: 0 1px 2px rgba(0,0,0,.5)
|
||||||
|
background-color: var(--side-nav-color)
|
||||||
|
color: var(--secondary-text-color)
|
||||||
|
user-select: none
|
||||||
|
|
||||||
|
&.left
|
||||||
|
right: 50%
|
||||||
|
|
||||||
|
&.right
|
||||||
|
left: 50%
|
||||||
|
|
||||||
|
.list
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
list-style-type: none
|
||||||
|
|
||||||
|
.listItem
|
||||||
|
padding: 10px
|
||||||
|
margin: 0
|
||||||
|
white-space: nowrap
|
||||||
|
cursor: pointer
|
||||||
|
transition: background 0.2s ease-out
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: var(--side-nav-hover-color)
|
||||||
|
transition: background 0.2s ease-in
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background-color: var(--side-nav-active-color)
|
||||||
|
transition: background 0.1s ease-in
|
@ -21,16 +21,19 @@
|
|||||||
center: dropdownPosition === 'center'
|
center: dropdownPosition === 'center'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<p
|
<ul class="list">
|
||||||
v-for="(label, index) in dropdownNames"
|
<li
|
||||||
:key="index"
|
v-for="(label, index) in dropdownNames"
|
||||||
@click="handleDropdownClick(index)"
|
class="listItem"
|
||||||
>
|
:key="index"
|
||||||
{{ label }}
|
@click="handleDropdownClick(index)"
|
||||||
</p>
|
>
|
||||||
|
{{ label }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script src="./ft-icon-button.js" />
|
<script src="./ft-icon-button.js" />
|
||||||
<style scoped src="./ft-icon-button.css" />
|
<style scoped lang="sass" src="./ft-icon-button.sass" />
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
grid-template-columns: auto
|
grid-template-columns: auto
|
||||||
|
|
||||||
.videoTitle
|
.videoTitle
|
||||||
font-size: 20px
|
font-size: 22px
|
||||||
margin: 0 0 20px
|
margin: 0 0 20px
|
||||||
|
|
||||||
.channelInformation
|
.channelInformation
|
||||||
@ -20,12 +20,14 @@
|
|||||||
|
|
||||||
.channelName
|
.channelName
|
||||||
margin-left: 6px
|
margin-left: 6px
|
||||||
margin-bottom: 4px
|
|
||||||
|
|
||||||
.subscribeButton
|
.subscribeButton
|
||||||
padding: 6px
|
padding: 5px
|
||||||
font-size: 14px
|
font-size: 14px
|
||||||
|
|
||||||
|
.datePublished
|
||||||
|
margin-bottom: 24px
|
||||||
|
|
||||||
.viewCount
|
.viewCount
|
||||||
margin: 4px 0px 0px
|
margin: 4px 0px 0px
|
||||||
text-align: right
|
text-align: right
|
||||||
|
Loading…
Reference in New Issue
Block a user