From 0551691684887d50616bfbd63775565676ca912a Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Fri, 26 Oct 2018 01:40:15 +0000
Subject: [PATCH] edit css styles
---
.../imports/ui/components/app/styles.scss | 5 +-
.../message-list-item/styles.scss | 1 -
.../components/poll/live-result/styles.scss | 30 ++++++-----
.../imports/ui/components/poll/styles.scss | 52 +++++++++----------
.../imports/ui/components/polling/styles.scss | 42 ++++++++-------
.../user-polls/container.jsx | 13 -----
.../user-list-content/user-polls/styles.scss | 20 +++----
.../ui/stylesheets/variables/breakpoints.scss | 10 +---
8 files changed, 75 insertions(+), 98 deletions(-)
diff --git a/bigbluebutton-html5/imports/ui/components/app/styles.scss b/bigbluebutton-html5/imports/ui/components/app/styles.scss
index 89a4c20da5..ff86b2505c 100755
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@@ -1,12 +1,11 @@
@import "/imports/ui/stylesheets/variables/_all";
-$poll-pane-min-width: 20em;
-
:root {
--navbar-height: 63px; // TODO: Change to NavBar real height
--actionsbar-height: 75px; // TODO: Change to ActionsBar real height
--bars-padding: calc(var(--lg-padding-x) - .45rem); // -.45 so user-list and chat title is aligned with the presentation title
--userlist-handle-width: 5px; // 5px so user-list and chat resize handle render as the same size
+ --poll-pane-min-width: 20em;
}
.main {
@@ -153,7 +152,7 @@ $poll-pane-min-width: 20em;
.poll {
background-color: var(--color-white);
- min-width: $poll-pane-min-width;
+ min-width: var(--poll-pane-min-width);
padding: 1rem;
}
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
index 6cae52b42f..8956bbcba7 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss
@@ -17,7 +17,6 @@
.systemMessage {
padding: var(--line-height-computed) 0;
- padding-top: 0px;
border-bottom: 1px solid var(--color-gray-lighter);
.item:not(&) + & {
diff --git a/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss b/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
index ad7a8acf05..5688eb3ea6 100644
--- a/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
@@ -1,11 +1,13 @@
@import "/imports/ui/stylesheets/variables/_all";
-$stats-border-color: #d4d9df;
-$stats-option-width: 4em;
-$stats-element-width: 17%;
-
-$sm-margin: 0.3125rem;
-$user-line-height: 1.75rem;
+:root {
+ --stats-border-color: #d4d9df;
+ --stats-option-width: 4em;
+ --stats-element-width: 17%;
+
+ --sm-margin: 0.3125rem;
+ --user-line-height: 1.75rem;
+}
.btn {
width: 100%;
@@ -28,8 +30,8 @@ $user-line-height: 1.75rem;
.right,
.center {
padding: var(--sm-padding-y);
- margin-top: $sm-margin;
- margin-bottom: $sm-margin;
+ margin-top: var(--sm-margin);
+ margin-bottom: var(--sm-margin);
color: var(--color-text);
}
@@ -37,11 +39,11 @@ $user-line-height: 1.75rem;
.right {
flex: 0 0 auto;
position: relative;
- min-width: $stats-element-width;
+ min-width: var(--stats-element-width);
}
.left {
- width: $stats-option-width;
+ width: var(--stats-option-width);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -50,7 +52,7 @@ $user-line-height: 1.75rem;
.right {
text-align: right;
- max-width: $stats-element-width;
+ max-width: var(--stats-element-width);
}
.container,
@@ -61,7 +63,7 @@ $user-line-height: 1.75rem;
.stats {
display: flex;
flex-direction: column;
- border: 1px solid $stats-border-color;
+ border: 1px solid var(--stats-border-color);
border-radius: var(--border-size-large);
padding: var(--md-padding-x);
@@ -98,11 +100,11 @@ $user-line-height: 1.75rem;
.item,
.itemR {
width: 50%;
- line-height: $user-line-height;
+ line-height: var(--user-line-height);
}
.item,
.itemR {
- line-height: $user-line-height;
+ line-height: var(--user-line-height);
color: var(--color-text);
}
diff --git a/bigbluebutton-html5/imports/ui/components/poll/styles.scss b/bigbluebutton-html5/imports/ui/components/poll/styles.scss
index 9980043cea..5b8f85de31 100644
--- a/bigbluebutton-html5/imports/ui/components/poll/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/poll/styles.scss
@@ -1,12 +1,13 @@
@import "/imports/ui/stylesheets/variables/_all";
@import "/imports/ui/stylesheets/mixins/focus";
-$column-amount: 2;
-$poll-blue: #1A73D4;
+:root {
+ --column-amount: 2;
+ --poll-blue: #1A73D4;
+}
.closeBtn {
position: relative;
- margin-left: 9.125rem;
}
.btn {
@@ -16,19 +17,19 @@ $poll-blue: #1A73D4;
.hideBtn {
position: relative;
- background-color: white;
+ background-color: var(--color-white);
display: block;
- margin: 4px;
- margin-bottom: 2px;
+ margin: var(--border-size-large);
+ margin-bottom: var(--border-size);
padding-left: 0px;
> i {
- color: black;
- font-size: 85%;
+ color: var(--color-gray-dark);
+ font-size: smaller;
}
&:hover {
- background-color: #fff;
+ background-color: var(--color-white);
}
}
@@ -41,8 +42,8 @@ $poll-blue: #1A73D4;
> input {
width: 100%;
- margin-top: .3rem;
- margin-bottom: .3rem;
+ margin-top: var(--sm-padding-y);
+ margin-bottom: var(--sm-padding-y);
}
> input:first-child {
@@ -57,34 +58,29 @@ $poll-blue: #1A73D4;
}
.header {
+ position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: var(--md-padding-y);
-
- > a {
- text-decoration: none;
- }
}
.instructions {
- margin-top: var(--lg-padding-x);
margin-bottom: var(--lg-padding-x);
-
color: var(--color-text);
}
.grid {
display: grid;
- grid-template-columns: repeat($column-amount, 1fr);
+ grid-template-columns: repeat(var(--column-amount), 1fr);
> pollBtn:nth-child(odd) {
grid-column: 1;
}
> pollBtn:nth-child(even) {
- grid-column: $column-amount;
+ grid-column: var(--column-amount);
}
}
@@ -98,12 +94,12 @@ $poll-blue: #1A73D4;
.customBtn:hover,
.pollBtn:hover {
- box-shadow: 0 0 0 1px $poll-blue;
+ box-shadow: 0 0 0 1px var(--poll-blue);
background-color: var(--color-white);
- color: $poll-blue;
+ color: var(--poll-blue);
> span {
- color: $poll-blue;
+ color: var(--poll-blue);
opacity: 1;
}
}
@@ -121,7 +117,7 @@ $poll-blue: #1A73D4;
}
> span:hover {
- color: $poll-blue;
+ color: var(--poll-blue);
opacity: 1;
}
}
@@ -129,24 +125,24 @@ $poll-blue: #1A73D4;
.customBtn:active,
.pollBtn:active {
&:focus {
- box-shadow: 0 0 0 1px $poll-blue;
+ box-shadow: 0 0 0 1px var(--poll-blue);
}
background-color: var(--color-white);
- box-shadow: 0 0 0 1px $poll-blue;
+ box-shadow: 0 0 0 1px var(--poll-blue);
> span {
- color: $poll-blue;
+ color: var(--poll-blue);
}
}
.customBtn:focus,
.pollBtn:focus {
background-color: var(--color-white);
- box-shadow: 0 0 0 1px $poll-blue;
+ box-shadow: 0 0 0 1px var(--poll-blue);
> span {
- color: $poll-blue;
+ color: var(--poll-blue);
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/polling/styles.scss b/bigbluebutton-html5/imports/ui/components/polling/styles.scss
index 6d852b7a05..3a08286b40 100644
--- a/bigbluebutton-html5/imports/ui/components/polling/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/polling/styles.scss
@@ -1,27 +1,32 @@
@import "../../stylesheets/variables/_all";
-$poll-width: 18rem;
-$max-btn-width: 9em;
-$col-amount: 2;
+:root {
+ --col-amount: 2;
+ --max-btn-width: 9em;
+ --overlayIndex: 1015;
+ --overlayOpacity: 0.349;
+ --pollIndex: 1016;
+ --poll-width: 18rem;
+}
.overlay {
position: absolute;
height: 100vh;
width: 100vw;
- z-index: 1015;
+ z-index: var(--overlayIndex);
pointer-events: none;
- @media screen and (max-width: 479px), screen and (max-height: 479px) {
- background-color: rgba(0, 0, 0, 0.349);
+ @include mq($hasPhoneDimentions) {
+ background-color: rgba(0, 0, 0, var(--overlayOpacity));
}
}
.pollingContainer {
pointer-events:auto;
- width: $poll-width;
+ width: var(--poll-width);
position: absolute;
- z-index: 1016;
+ z-index: var(--pollIndex);
border: 1px solid var(--color-off-white);
border-radius: var(--border-radius);
box-shadow: var(--color-gray-dark) 0px 0px var(--lg-padding-y);
@@ -33,7 +38,7 @@ $col-amount: 2;
bottom: var(--sm-padding-x);
right: var(--sm-padding-x);
- @media screen and (max-height: 479px), screen and (max-width: 479px) {
+ @include mq($hasPhoneDimentions) {
bottom: auto;
right: auto;
top: 50%;
@@ -52,25 +57,21 @@ $col-amount: 2;
.pollingAnswers {
display: grid;
- grid-template-columns: repeat($col-amount, 1fr);
+ grid-template-columns: repeat(var(--col-amount), 1fr);
> pollButtonWrapper:nth-child(odd) {
grid-column: 1;
}
> pollButtonWrapper:nth-child(even) {
- grid-column: $col-amount;
+ grid-column: var(--col-amount);
}
- @media screen and (max-width: 479px) {
+ @include mq($hasPhoneDimentions) {
grid-template-columns: repeat(1, 1fr);
- > pollButtonWrapper:nth-child(odd) {
- grid-column: 1;
- }
-
- > pollButtonWrapper:nth-child(even) {
- grid-column: 1;
+ .pollButtonWrapper .button {
+ grid-column: 1;
}
}
@@ -85,8 +86,9 @@ $col-amount: 2;
.pollingButton {
width: 100%;
- max-width: $max-btn-width;
- @media screen and (max-width: 479px) {
+ max-width: var(--max-btn-width);
+
+ @include mq($hasPhoneDimentions) {
max-width: none;
}
white-space: nowrap;
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/container.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/container.jsx
index fe468dc689..397bc7d417 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/container.jsx
@@ -1,6 +1,4 @@
import React from 'react';
-import Users from '/imports/api/users';
-import Polls from '/imports/api/polls';
import Auth from '/imports/ui/services/auth';
import { withTracker } from 'meteor/react-meteor-data';
import UserPolls from './component';
@@ -9,15 +7,4 @@ const UserPollsContainer = ({ ...props }) => <UserPolls {...props} />;
export default withTracker(({ }) => {
Meteor.subscribe('results', Auth.meetingID);
-
- // const getUser = userId => Users.findOne({ userId });
-
- // const currentUser = Users.findOne({ userId: Auth.userID });
-
- // const currentPoll = Polls.findOne({ meetingId: Auth.meetingID });
-
- return {
- // currentUser,
- // currentPoll,
- };
})(UserPollsContainer);
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss
index 8d2a89157d..96a15538b3 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-polls/styles.scss
@@ -1,18 +1,18 @@
@import "../../styles.scss";
@import "/imports/ui/stylesheets/variables/_all";
+
$list-item-bg-hover: darken(#F3F6F9, 7%);
$item-focus-border: #92BCEA;
.smallTitle {
- font-size: 0.85rem;
+ font-size: var(--font-size-small);
font-weight: 600;
text-transform: uppercase;
- padding: 0 0.75rem;
- margin: 0 0 0.625rem 0;
- color: #8B9AA8;
- margin-bottom: 12px;
- margin-top: 8px;
+ padding: 0 var(--sm-padding-x);
+ color: var(--color-gray-light);
+ margin-bottom: var(--sm-padding-x);
+ margin-top: var(--sm-padding-x);
}
.scrollableList {
@@ -29,9 +29,9 @@ $item-focus-border: #92BCEA;
flex-flow: row;
flex-grow: 0;
flex-shrink: 0;
- padding-top: 10px;
- padding-bottom: 8px;
- padding-left: 12px;
+ padding-top: var(--lg-padding-y);
+ padding-bottom: var(--lg-padding-y);
+ padding-left: var(--lg-padding-y);
text-decoration: none;
width: 100%;
color: var(--color-gray-dark);
@@ -52,7 +52,7 @@ $item-focus-border: #92BCEA;
flex-grow: 1;
line-height: 2;
text-align: left;
- padding-left: 10px;
+ padding-left: var(--lg-padding-y);
text-overflow: ellipsis;
}
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss
index da3dfcac59..5d741c78f3 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss
@@ -41,15 +41,7 @@ $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
-//iPhone 5 size range
-$ip5-range: "(min-device-width : 320px) and (max-device-width : 568px)";
-// iPhone 6, 7 and 8 size range
-$ip678-range: "(min-device-width : 375px) and (max-device-width : 667px)";
-
-$ip5-portrait: "#{$portrait} and #{$ip5-range}";
-$ip5-landscape: "#{$landscape} and #{$ip5-range}";
-$ip678-portrait: "#{$portrait} and #{$ip678-range}";
-$ip678-landscape: "#{$landscape} and #{$ip678-range}";
+$hasPhoneDimentions: "#{$screen} and (max-height: 479px), #{$screen} and (max-width: 479px)";
$breakpoints: (
'screen': $screen,
--
GitLab