Skip to content

Commit

Permalink
scss restyling, better usability on small displays (#743)
Browse files Browse the repository at this point in the history 
* scss restyling, better usability on small displays

* revert position of delete button in server edit
  • Loading branch information
@ssrahn
ssrahn authored Aug 4, 2023
1 parent 06d2df8 commit 0be039e
Show file tree
Hide file tree
Showing 9 changed files with 331 additions and 147 deletions.
230 changes: 182 additions & 48 deletions assets/css/opencast.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ $episode-background: $light-gray-color-20;
visibility: hidden;
}

.button.wrap-button {
white-space: normal;
}

/* * * * * * * * * */
/* P A G I N G */
/* * * * * * * * * */
Expand Down Expand Up @@ -123,11 +127,8 @@ $episode-background: $light-gray-color-20;
.oc--playercontainer {
background: $episode-background;
margin-top: 1em;
padding-right: 1.5em;
z-index: 1999;
height: $item-height;


width: 119px;

.oc_playerframe {
display: block;
Expand Down Expand Up @@ -219,31 +220,12 @@ $episode-background: $light-gray-color-20;
}
}

.oc--metadata {
margin-right: 1em;
flex-basis: 100%;

&-title {
margin-top: 10px;
margin-bottom: 2px;
}

.tooltip {
margin-left: 0.5em;
}
}

.oc--metadata--empty {
div {
margin-bottom: 5px;
}
}

.oc--metadata-title {
border-bottom: none;
display: inline-flex;
}

.oc--metadata-description {
margin-top: 0.5em;
}
Expand Down Expand Up @@ -294,63 +276,127 @@ $episode-background: $light-gray-color-20;
}
}


.oc--episode-list--small {
clear: both;
padding-left: 0;
list-style: none;
overflow: auto;
height: auto;

.oc--flexplaycontainer {
width: 10em;
min-width: 10em;
}

.oc--flex-episode {
.oc--grid-episode {
border-bottom: 1px solid $light-gray-color-40;
padding: 5px 1em 5px 1em;
display: flex;
position: relative;
overflow: hidden;
max-height: 70px;

display: grid;
grid-template-columns: auto auto minmax(auto, min-content) minmax(min-content,1fr) auto auto;

.oc--playercontainer {
margin-top: 5px;
background-color: transparent;
margin-top: 5px;
margin-right: 12px;

grid-column: 2;
grid-row: 1 / span 2;

img.oc--previewimage {
max-height: 60px;
}

.oc--duration{
bottom: 0px;
right: 0px;
}

.oc--views {
left: 0px;
bottom: 0px;
}

.oc--image-button {
height: 40px;
opacity: 0.6;
}
}

img.oc--previewimage {
max-height: 60px;
.oc--metadata-title {
grid-column: 3;
grid-row: 1;

margin: 10px 0 0 0;

overflow: hidden;

h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

.oc--duration{
bottom: 0px;
right: 0px;
.oc--date {
grid-column: 4;
grid-row: 1;

margin: 10px 0 0 0;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.oc--views {
left: 0px;
bottom: 0px;
.oc--tooltip {
grid-column: 5;
grid-row: 1;

.tooltip {
margin: 10px 5px 0 5px;
}
}

.oc--image-button {
height: 40px;
.oc--tags {
grid-column: 3 / span 3;
grid-row: 2;

margin-right: 5px;

white-space: nowrap;
overflow: auto;
}

.oc--date {
margin-top: 1px;
.oc--actions-container {
grid-column: 6;
grid-row: 1 / span 2;
}

.oc--metadata--empty {
grid-column: 3 / span 4;
grid-row: 1 / span 2;

.oc--metadata {
h2 {
margin-top: 5px;
h2, div {
margin-bottom: 5px;
}
}

.oc--flex-checkbox {
grid-column: 1;
grid-row: 1 / span 2;
}
}

.oc--sort-options {
grid-column: 6;
grid-row: 1 / span 2;

height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-left: 5px;
border-left: 1px solid $light-gray-color-40;
align-self: center;
white-space: nowrap;

Expand Down Expand Up @@ -450,6 +496,7 @@ h2.oc--loadingbar, .oc--loadingbar-title {

display: flex;
flex-direction: row;
overflow: auto;

li {
padding: none;
Expand All @@ -462,6 +509,7 @@ h2.oc--loadingbar, .oc--loadingbar-title {
.oc--searchbar-input {
padding: 8px;
width: 100%;
min-width: 8em;

input {
&:focus {
Expand Down Expand Up @@ -661,7 +709,7 @@ h2.oc--loadingbar, .oc--loadingbar-title {
.oc--admin--server-card-grid {
margin: 10px 0px;
display: grid;
grid-template-columns: repeat(auto-fit, 405px);
grid-template-columns: repeat(auto-fit, minmax(200px, 405px));
grid-gap: 10px;
}

Expand Down Expand Up @@ -840,6 +888,92 @@ label.oc--file-upload {
}
}

@media only screen and (max-width: $major-breakpoint-large) {
.oc--episode-list--small {
grid-template-columns: auto 10em auto auto auto auto;
grid-template-rows: auto 1fr auto;

.oc--grid-episode {
max-height: 100px;

.oc--playercontainer {
grid-column: 2;
grid-row: 2 / span 2;

margin-top: 0;
padding-right: 11;
}

.oc--metadata-title {
grid-column: 2 / span 3;
grid-row: 1;

max-height: 1.4em;
margin-top: 4px;

h2 {
margin-bottom: 0;
overflow: auto;
}
}

.oc--date {
grid-column: 3 / span 3;
grid-row: 2;

margin-top: 0;

max-height: 2.8em;
white-space: normal;
overflow: hidden;
}

.oc--tags {
grid-column: 3 / span 3;
grid-row: 3;

max-height: 3em;
margin-bottom: 0;
}

.oc--actions-container {
grid-column: 6;
grid-row: 1 / span 3;
}

.oc--tooltip {
grid-column: 5;
grid-row: 1;

.tooltip {
margin: 5px 5px 0 5px;
}
}

.oc--metadata--empty {
grid-row: 1 / span 3;
}
}
}
}

.oc--pagination-mobile {
@extend .oc--pagination;
visibility: hidden;
display: none;
}

@media only screen and (max-width: $major-breakpoint-small) {
.oc--pagination {
visibility: hidden;
display: none;
}
.oc--pagination-mobile {
visibility: visible;
display: flex;
}
}

/* * * * * * * * * * * * */
/* P L A Y L I S T S */
/* * * * * * * * * * * * */
Expand All @@ -862,7 +996,7 @@ label.oc--file-upload {
.oc--tags {

&-video {
margin-bottom: 10px;
margin-bottom: 8px;

& > span {
background-color: $light-gray-color-40;
Expand Down
9 changes: 7 additions & 2 deletions vueapp/components/Config/EditServer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<StudipDialog
:title="$gettext('Opencast Server Einstellungen')"
:confirmText="$gettext('Einstellungen speichern und überprüfen')"
:confirmText="$gettext('Speichern')"
:closeText="$gettext('Schließen')"
:disabled="disabled"
height="600"
Expand Down Expand Up @@ -33,7 +33,12 @@
</template>
<template v-slot:dialogButtons>
<button class="button trash" type="button" @click="deleteConfig" :disabled="disabled">
<button v-if="config !== null"
class="button trash"
type="button"
@click="deleteConfig"
:disabled="disabled"
>
Löschen
</button>
</template>
Expand Down
Loading

0 comments on commit 0be039e

Please sign in to comment.