CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2026-03-20 11:48:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Frontent dev env (#247)

Browse Source 
* Added frontend development files/environment

* More items-categories related removals

* Improvements in pages templates (inc. static pages)

* Improvements in video player

* Added empty home page message + cta

* Updates in media, playlist and management pages

* Improvements in material icons font loading

* Replaced media & playlists links in frontend dev-env

* frontend package version update

* chnaged frontend dev url port

* static files update

* Changed default position of theme switcher

* enabled frontend docker container
This commit is contained in:
Yiannis Stergiou
2021-07-11 18:01:34 +03:00
committed by GitHub
parent 060bb45725
commit aa6520daac
555 changed files with 201927 additions and 66002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

731
frontend/src/static/js/components/profile-page/ProfilePage.scss Normal file
View File

@@ -0,0 +1,731 @@
@import '../../../css/includes/_variables.scss';
@import '../../../css/includes/_variables_dimensions.scss';
#page-profile-media,
#page-profile-playlists,
#page-profile-about,
#page-liked.profile-page-liked,
#page-history.profile-page-history {
.page-main {
background-color: var(--profile-page-bg-color);
}
}
.profile-page-header {
background-color: var(--profile-page-header-bg-color);
.profile-info-nav-wrap,
.profile-info-nav-wrap:before {
background-color: var(--profile-page-header-bg-color);
}
.profile-info {
.profile-videos-number {
color: var(--profile-page-info-videos-number-text-color);
}
}
.profile-nav {
background-color: var(--profile-page-header-bg-color);
border-bottom-color: var(--profile-page-header-bg-color);
ul {
li {
a {
color: var(--profile-page-nav-link-text-color);
&:hover {
color: var(--profile-page-nav-link-hover-text-color);
}
}
&.active {
a {
color: var(--profile-page-nav-link-active-text-color);
}
&:after {
background-color: var(--profile-page-nav-link-active-after-bg-color);
}
}
}
}
}
}
.profile-page-content {
background-color: var(--profile-page-bg-color);
.item-content h3 {
span {
background-color: var(--profile-page-bg-color);
}
}
}
.profile-page-header {
position: relative;
width: 100%;
float: left;
button {
&:focus {
box-shadow: none;
}
}
.profile-banner-wrap {
position: relative;
width: 100%;
float: left;
&.no-banner-img {
padding-bottom: 0;
.profile-banner {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
padding: 0 1rem;
margin: 24px auto;
text-align: right;
transform: none;
width: 100%;
@media (min-width: 492px) {
}
@media (min-width: 768px) {
padding: 0;
width: 654px;
}
@media (min-width: 928px) {
width: 872px;
}
@media (min-width: 1146px) {
width: 1090px;
}
@media (min-width: 1582px) {
width: 1308px;
}
}
a.edit-channel {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
display: inline-block;
}
&:hover {
background-color: rgba(#000, 0.1);
}
}
.popup {
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
}
.popup-message-bottom {
button {
position: relative;
width: auto;
padding: 0;
border: 0;
background: none;
font-size: 14px;
&.proceed-profile-removal {
float: right;
}
&.cancel-profile-removal {
float: left;
color: var(--body-text-color);
}
}
}
}
.profile-banner {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
display: block;
background-attachment: scroll;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-banner-wrap {
padding-bottom: 18%;
@media screen and (min-width: 492px) {
padding-bottom: calc(100% / 6.2);
}
@media screen and (max-width: 339px) {
}
}
.profile-banner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
}
a.edit-channel,
a.edit-profile {
position: absolute;
}
a.edit-channel,
a.edit-profile,
.delete-profile-wrap > button {
text-decoration: none;
font-size: 13px;
font-weight: 400;
color: #fff;
border: 0;
line-height: inherit;
padding: 6px 12px;
border-radius: 1px;
background-color: var(--brand-color, var(--default-brand-color));
@media screen and (min-width: 710px) {
padding: 8px 16px;
}
}
a.edit-channel,
a.edit-profile {
}
a.edit-channel {
top: 16px;
right: 16px;
@media screen and (min-width: 710px) {
right: 24px;
}
}
a.edit-profile {
top: 0;
right: 0;
}
.delete-profile-wrap {
position: absolute;
top: 16px;
left: 16px;
@media screen and (min-width: 710px) {
left: 24px;
}
}
.profile-info-nav-wrap {
position: relative;
width: 100%;
float: left;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
@media screen and (min-width: 710px) {
padding-left: 24px;
padding-right: 24px;
}
&:before {
content: '';
position: absolute;
top: 0;
right: 100%;
width: 100%;
height: 100%;
display: block;
}
}
.profile-info {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
clear: both;
.sliding-sidebar & {
transition-property: width;
transition-duration: 0.2s;
}
img {
display: block;
border-radius: 50%;
width: 80px;
height: 80px;
@media screen and (max-width: 709px) {
width: 64px;
height: 64px;
}
}
h1 {
display: inline-block;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 1.25;
margin: 0;
}
.profile-info-inner {
display: table;
width: 100%;
> * {
position: relative;
display: table-cell;
vertical-align: middle;
&:first-child {
width: 80px + 24px;
@media screen and (max-width: 709px) {
width: 64px + 16px;
}
}
}
}
.profile-videos-number {
display: block;
font-size: 14px;
font-family: Arial, sans-serif;
line-height: 1.5;
}
}
.profile-nav {
position: relative;
z-index: +1;
height: $_authorPage-navHeight;
border-bottom-width: 1px;
border-bottom-style: solid;
.items-list-wrap {
min-height: 0;
}
.profile-nav-inner {
max-width: 100%;
margin: 0 auto;
clear: both;
.sliding-sidebar & {
transition-property: width;
transition-duration: 0.2s;
}
}
&.items-list-outer .previous-slide,
&.items-list-outer .next-slide {
top: 4px;
bottom: 4px;
padding: 0 !important;
margin: 0;
background-color: var(--profile-page-header-bg-color);
.circle-icon-button {
margin: 0;
background-color: var(--profile-page-header-bg-color);
}
}
&.items-list-outer .previous-slide {
left: -0.75em;
left: -1px;
}
&.items-list-outer .next-slide {
right: -0.75em;
right: -1px;
}
ul {
position: relative;
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0;
li {
position: relative;
display: inline-block;
text-align: center;
vertical-align: bottom;
a {
display: block;
line-height: $_authorPage-navHeight;
width: 109px;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.007px;
}
&.active {
&:after {
content: '';
position: absolute;
display: block;
bottom: 1px;
left: 0;
width: 100%;
height: 3px;
}
}
&.media-search {
> * {
position: relative;
display: table;
float: left;
width: auto;
height: 3rem;
> span {
display: table-cell;
vertical-align: middle;
}
}
button {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
input[type='text'] {
max-width: 178px;
padding-left: 0;
padding-right: 0;
font-weight: 500;
border-width: 0 0 2px;
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
&:focus {
border-bottom-color: var(--profile-page-nav-link-active-after-bg-color);
}
}
}
}
}
}
&.fixed-nav {
.profile-info-nav-wrap {
padding-bottom: $_authorPage-navHeight;
}
.profile-nav {
z-index: +2;
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
@media screen and (min-width: 768px) {
.visible-sidebar & {
padding-left: var(--sidebar-width);
}
.sliding-sidebar & {
transition-property: padding-left;
transition-duration: 0.2s;
}
}
}
}
}
.page-main {
overflow: visible;
#page-profile-media &,
#page-profile-about &,
#page-profile-playlists &,
#page-liked.profile-page-liked &,
#page-history.profile-page-history & {
padding-bottom: 0;
.profile-page-content {
padding-bottom: 16px;
}
}
}
.profile-page-content {
position: relative;
width: 100%;
display: inline-block;
&:before {
content: '';
position: absolute;
top: 0;
right: 100%;
width: 100%;
height: 100%;
display: block;
background-color: var(--profile-page-bg-color);
}
.item-content h3 {
span {
&:after,
&:before {
background: var(--profile-page-item-content-title-bg-color);
}
}
}
}
#page-profile-about {
.items-list-ver.media-list-wrapper {
&:first-child {
padding-top: 12px;
}
&:last-child {
padding-bottom: 32px;
}
.media-list-row {
min-height: 0;
}
+ .items-list-ver.media-list-wrapper {
.media-list-row {
margin-top: 32px;
border-top: 1px solid var(--media-list-row-border-color);
}
}
}
.profile-details {
list-style: none;
margin: 0;
padding: 0;
li {
display: block;
line-height: 2;
margin-bottom: 1em;
max-width: 100%;
overflow: hidden;
> span {
display: inline-block;
vertical-align: top;
white-space: pre-wrap;
overflow-wrap: break-word;
max-width: 100%;
&:first-child {
width: 160px;
line-height: 2.2;
font-size: 0.928571429em;
}
&:last-child {
font-weight: 500;
> * {
display: block;
}
> * + * {
&::before {
display: block;
content: '';
}
}
}
}
.author-social-media {
span {
display: block;
&:before {
display: none;
}
}
}
}
}
}
.profile-page-content {
> * {
padding-left: 16px !important;
padding-right: 16px !important;
@media (min-width: 580px) {
padding-left: 0 !important;
padding-right: 0 !important;
}
> * {
padding-bottom: 32px;
}
}
}
.profile-page-content.with-cform {
.media-list-row {
max-width: 100% !important;
}
}
.profile-contact {
}
.user-contact-form {
position: relative;
width: 780px;
max-width: 100%;
&.pending-response {
opacity: 0.7;
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
label {
margin: 0 0 16px;
}
input[type='text'],
textarea {
min-width: 100%;
width: 100%;
max-width: 100%;
margin: 0 0 24px;
}
textarea {
min-height: 80px;
max-height: 50vh;
}
button {
line-height: 1;
padding: 12px 16px;
text-decoration: none;
color: #fff;
border: 0;
border-radius: 1px;
background-color: var(--default-theme-color);
}
}
.empty-profile-page-msg {
font-size: 14px;
}
$item-width: 218px;
$side-empty-space: 40px;
$-hor-spaces: 2 * $side-empty-space;
$-max-width: $-hor-spaces + ( 2 * $item-width ) - 1;
@media (max-width: $-max-width) {
#page-profile-about {
.media-list-wrapper.items-list-ver .media-list-row {
width: 100%;
max-width: 100%;
}
}
}
@media (min-width: ( ( 2 * $side-empty-space ) + ( 2 * $item-width ) )) and (max-width: 599px) {
#page-profile-about {
.media-list-wrapper.items-list-ver .media-list-row {
width: calc(2 * var(--default-item-width));
max-width: calc(2 * var(--default-item-width));
}
}
}
@for $i from 2 through 6 {
$-hor-spaces: 2 * $side-empty-space;
$-min-width: $-hor-spaces + ($i * $item-width);
@media (min-width: $-min-width) {
.profile-page-header .profile-info,
.profile-page-header .profile-nav .profile-nav-inner {
width: calc(#{$i} * var(--item-width, var(--default-item-width)));
}
}
}
@for $i from 3 through 7 {
$-hor-spaces: 2 * $side-empty-space;
$-min-width: $-hor-spaces + ($i * $item-width);
$j: $i - 1;
@media (min-width: $-min-width) and (min-width: 768px) {
.visible-sidebar .profile-page-header .profile-info,
.visible-sidebar .profile-page-header .profile-nav .profile-nav-inner {
width: calc( #{$j} * var(--item-width, var(--default-item-width)));
}
}
}
$-hor-spaces: 2 * $side-empty-space;
$-max-width: $-hor-spaces + ( 2 * $item-width ) - 1;
@media (max-width: $-max-width ) and (max-width: 709px) {
.profile-page-header .profile-nav.fixed-nav .profile-nav {
padding-left: 1em;
}
}
@media (max-width: $-max-width ) and (max-width: 768px) {
.profile-page-header .profile-nav.fixed-nav .profile-nav {
padding-left: 1.5em;
}
}