IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Progress bar CSS refactoring (#6444)

Browse Source 
* Less magic in calculating topic progress bar

* more minor adjustments to topic progress CSS

* Bounce back button again

* Fix prettier warning
This commit is contained in:
Penar Musaraj
2018-10-03 13:21:57 -04:00
committed by Kris
parent 9e008047db
commit b5bdd42838
2 changed files with 17 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/stylesheets/common/base/topic.scss
View File

@@ -1,30 +1,30 @@
@keyframes button-jump-up { @keyframes button-jump-up {
0% { 0% {
bottom: 0; margin-bottom: -60px;
} }
50% { 50% {
bottom: 45px; margin-bottom: 10px;
} }
65% { 65% {
bottom: 40px; margin-bottom: 0px;
} }
77% { 77% {
bottom: 43px; margin-bottom: 5px;
} }
100% { 100% {
bottom: 40px; margin-bottom: 0px;
} }
} }
.progress-back-container { .progress-back-container {
position: fixed;
bottom: 40px;
z-index: z("dropdown"); z-index: z("dropdown");
margin-right: 0; margin-right: 0;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-name: button-jump-up; animation-name: button-jump-up;
width: 145px; width: 145px;
text-align: center; text-align: center;
position: relative;
margin-bottom: 0px;
.btn { .btn {
margin: 0; margin: 0;
} }
@@ -32,9 +32,10 @@
#topic-progress-wrapper { #topic-progress-wrapper {
.topic-admin-menu-button-container { .topic-admin-menu-button-container {
position: relative; position: absolute;
right: 38px; bottom: 0px;
top: 35px; left: -38px;
width: 0px;
.widget-button { .widget-button {
height: 35px; height: 35px;
border-right: 1px solid dark-light-diff($primary, $secondary, 80%, -70%); border-right: 1px solid dark-light-diff($primary, $secondary, 80%, -70%);
@@ -43,18 +44,16 @@
.topic-admin-popup-menu.right-side { .topic-admin-popup-menu.right-side {
position: relative; position: relative;
right: 50px; right: 50px;
left: auto;
transform: translateZ(
0
); // iOS11 Rendering bug https://meta.discourse.org/t/wrench-menu-not-disappearing-on-ios/94297
} }
} }
#topic-progress-wrapper.docked { #topic-progress-wrapper.docked {
.topic-admin-popup-menu.right-side { .topic-admin-popup-menu.right-side {
right: 50px;
bottom: -150px; // Prevents menu from being too high when a topic is very short bottom: -150px; // Prevents menu from being too high when a topic is very short
transform: translate3d(
0,
0,
0
); // iOS11 Rendering bug https://meta.discourse.org/t/wrench-menu-not-disappearing-on-ios/94297
} }
} }

11
app/assets/stylesheets/mobile/topic.scss
View File

@@ -61,11 +61,8 @@
bottom: 0; bottom: 0;
z-index: z("timeline"); z-index: z("timeline");
margin-right: 148px; margin-right: 148px;
.topic-admin-menu-button-container { .topic-admin-menu-button-container .toggle-admin-menu {
top: 43px; height: 43px;
.toggle-admin-menu {
height: 43px;
}
} }
} }
@@ -110,10 +107,6 @@
} }
} }
.progress-back-container {
bottom: 43px;
}
#topic-progress { #topic-progress {
position: relative; position: relative;
&.hidden { &.hidden {