Niquarl/joinpeertube
1
0
Fork 0
forked from nutomic/joinpeertube
Code Issues Pull requests Releases Wiki Activity

Improve responsive

Browse source
This commit is contained in:
Chocobozzz 2019-11-06 10:33:07 +01:00
parent 34dafc8df4
commit fd2a7c8bf7
No known key found for this signature in database
GPG key ID: 583A612D890159BE
3 changed files with 49 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/ContentSelection.vue
View file

@ -2,6 +2,16 @@
<div id="content-selection"> <div id="content-selection">
<div class="left"> <div class="left">
<div class="title title-small-screens">
<div class="icon">
<icon-video v-if="type === 'video'"></icon-video>
<icon-channel v-if="type === 'channel'"></icon-channel>
<icon-instance v-if="type === 'instance'"></icon-instance>
</div>
{{ title }}
</div>
<img :src="buildImgUrl('content-selection-thumbnails/' + thumbnailName)" alt="thumbnail"/> <img :src="buildImgUrl('content-selection-thumbnails/' + thumbnailName)" alt="thumbnail"/>
<a target="_blank" rel="noopener noreferrer" :href="url" class="jpt-button jpt-button-medium"> <a target="_blank" rel="noopener noreferrer" :href="url" class="jpt-button jpt-button-medium">
@ -29,7 +39,7 @@
</div> </div>
<div class="right"> <div class="right">
<div class="title"> <div class="title title-normal-screens">
<div class="icon"> <div class="icon">
<icon-video v-if="type === 'video'"></icon-video> <icon-video v-if="type === 'video'"></icon-video>
<icon-channel v-if="type === 'channel'"></icon-channel> <icon-channel v-if="type === 'channel'"></icon-channel>
@ -57,14 +67,21 @@
#content-selection { #content-selection {
display: flex; display: flex;
@media screen and (max-width: $small-screen) { .title-small-screens {
flex-direction: column; display: none;
}
.left { .title {
align-items: center !important; font-size: 24px;
display: flex !important; font-weight: $font-semibold;
flex-direction: column !important; display: flex;
margin-bottom: 20px !important; align-items: center;
font-family: 'Proza Libre', sans-serif;
.icon {
margin-right: 10px;
position: relative;
top: -2px;
} }
} }
@ -100,20 +117,6 @@
.right { .right {
min-height: 170px; min-height: 170px;
.title {
font-size: 24px;
font-weight: $font-semibold;
display: flex;
align-items: center;
font-family: 'Proza Libre', sans-serif;
.icon {
margin-right: 10px;
position: relative;
top: -2px;
}
}
.description { .description {
font-size: 16px; font-size: 16px;
} }
@ -131,6 +134,26 @@
} }
} }
} }
@media screen and (max-width: $small-screen) {
flex-direction: column;
.title-small-screens {
display: inherit;
margin-bottom: 5px;
}
.title-normal-screens {
display: none;
}
.left {
align-items: center;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
}
} }
</style> </style>

3
src/scss/main.scss
View file

@ -191,7 +191,8 @@ p > a {
font-size: 25px; font-size: 25px;
.brand-title { .brand-title {
height: 30px; height: 26px;
margin-left: 5px;
} }
} }
} }

4
src/views/Instances.vue
View file

@ -17,7 +17,7 @@
<div class="block-with-image step-1"> <div class="block-with-image step-1">
<div> <div>
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Multiple instances illustration"> <img :src="buildImgUrl('peertube-federation-multiplicity.jpg')" alt="Multiple instances illustration">
</div> </div>
<div> <div>
@ -40,7 +40,7 @@
</div> </div>
<div> <div>
<img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration"> <img :src="buildImgUrl('peertube-upload.jpg')" alt="PeerTube upload illustration">
</div> </div>
</div> </div>