Skip to content

Commit

Permalink
UI/UX Refresh (#134)
Browse files Browse the repository at this point in the history 
* add WhatsNew component

* add more to WhatsNew

* add keys to WhatsNew

* welcome panel link styling update

* update welcome panel banner text, styling, and spacing.  also add mobile styling and centering

* hover effects and styling for nav tabs

* border-radius for welcome panel

* welcome-panel spacing

* add scroll for nav-tab overflow for mobile

* add button hover and focus effects

* link styling across plugin

* add icon hover effects

* decrease bottom-border for support icon hover to 1px

* add border radius to input fields

* add ad-optional copy to support tab

* add hide and show button for whatsnew

* remove box shadow on focus for disqus logo

* add styling for whats-new container

* update readme

* update link in help resources for pricing page

* add remove ads button

* scope all changes to #disqus-admin id

* update latest version to 3.1

* linting

* fix snapshot tests

* update spacing for link in support

---------

Co-authored-by: Chris <[email protected]>
  • Loading branch information
@chrisjtang
chrisjtang and Chris authored Mar 29, 2024
1 parent ab3e9d5 commit 2932e0f
Show file tree
Hide file tree
Showing 8 changed files with 307 additions and 117 deletions.
2 changes: 2 additions & 0 deletions disqus/README.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ Disqus is the web's most popular comment system. Use Disqus to increase engageme

The Disqus for WordPress plugin lets site owners and developers easily add Disqus to their sites, replacing the default WordPress comment system. Disqus installs in minutes and automatically imports your existing comments.

In addition to our free-to-use, ad-supported Basic plan, we also offer ad-optional subscription plans that come with more advanced features and access to priority support. Please see our [pricing page](https://disqus.com/pricing/) for more details.

= Why Disqus? =

* Simple one-click installation that seamlessly integrates with WordPress without ever needing to edit a single line of code or losing any of your existing comments
Expand Down
344 changes: 233 additions & 111 deletions disqus/admin/css/disqus-admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,146 +3,268 @@
* included in this file.
*/


#wpadminbar #wp-admin-bar-disqus .ab-icon:before {
content: "\f101";
top: 3px;
}

.dsq-admin-header {
background: #494e58;
height: 100px;
position: absolute;
top: 0;
left: -20px;
right: -20px;
color: white;
}
#disqus-admin {
--disqus-blue: rgb(46, 159, 255);
.dsq-admin-header {
background: #494e58;
height: 100px;
position: absolute;
top: 0;
left: -20px;
right: -20px;
color: white;
}

.dsq-admin-wrapper {
margin-top: 20px;
}
.dsq-admin-wrapper {
margin-top: 20px;
a {
&:hover {
color: white;
background-color: var(--disqus-blue);
transition: color .3s ease-in-out, background-color .3s ease-in-out;
}
}
.disqus-logo {
img {
padding: 3px;
border: 3px transparent solid;
}
&:hover {
background-color: transparent;
img {
border-bottom: 3px var(--disqus-blue) solid;
}
}
&:focus {
box-shadow: unset !important;
}
}

.button-hero .disqus-icon {
float: left;
margin-top: 7px;
margin-right: 7px;
}
input {
border-radius: 6px;
}
textarea {
border-radius: 0;
}
}

.welcome-panel {
overflow: hidden;
}
.button-hero .disqus-icon {
float: left;
margin-top: 7px;
margin-right: 7px;
}

.about-description {
font-size: 40px !important;
color: #dcdcde;
font-weight: bold;
align-items: center;
text-align: center;
}
.whats-new {
padding: 5px;
&.visible {
border: 2px black solid;
border-radius: 12px;
background-color: white;
}
}

.welcome-panel-column .button {
margin-bottom: 1.33em;
}
.welcome-panel {
overflow: hidden;
border-radius: 12px;
.welcome-panel-content {
min-height: unset;
}
}

.button-large .dashicons {
margin-top: 4px;
}
.about-description {
font-size: 40px !important;
color: var(--disqus-blue);
font-weight: bold;
align-items: center;
text-align: center;
}

.submit .button-link {
text-decoration: none;
}
.welcome-panel .welcome-panel-content .welcome-panel-column-container {
display: flex;
justify-content: center;
gap: 10vw;
padding: 12px;
@media screen and (max-width: 768px) {
flex-direction: column;
align-items: center;
gap: 0px;
ul {
display: flex;
flex-direction: column;
}
}
.welcome-panel-column {
display: flex;
flex-direction: column;
gap: 0px;
width: fit-content;
max-width: 300px;
.button {
margin-bottom: 1.33em;
}
li {
box-shadow: inset 0 0 0 0 var(--disqus-blue);
padding: .25rem;
transition: color 1.3s ease-in-out, box-shadow .3s ease-in-out;
white-space: nowrap;
border-radius: 12px;
&:hover {
box-shadow: inset 150px 0 0 0 var(--disqus-blue);
a {
color: white;
}
}
a:focus {
box-shadow: unset !important;
}
}
}
}

/* Placeholder spinner */
.nav-tab-wrapper {
display: flex;
gap: 10px;
border-bottom: none;
@media screen and (max-width: 682px) {
overflow: scroll hidden;
}
.nav-tab {
border-radius: 12px;
border: 1px solid #c3c4c7;
margin-left: 0;
transition: color .3s ease-in-out, background-color .3s ease-in-out;
&:hover {
background-color: var(--disqus-blue);
color: white;
}
}
}

.dsq-loading-container {
height: 130px;
padding-top: 120px;
}
.button-large .dashicons {
margin-top: 4px;
}

.dsq-spinner {
z-index: 500;
.submit .button-link {
text-decoration: none;
}

border: 3px solid transparent;
border-color: transparent #c2c9d4 transparent #c2c9d4;
.button {
border-radius: 12px !important;
&:hover {
background-color: var(--disqus-blue) !important;
color: white !important;
transition: color .1s ease-in-out, background-color .3s ease-in-out !important;
}
}

animation: rotate-loading 1.2s linear 0s infinite normal;
transform-origin: 50% 50%;
.button.button-link {
padding: 0px 5px;
border-radius: 6px;
}

margin: auto;
width: 25px;
height: 25px;
/* Placeholder spinner */

border-radius: 28px;
}
.dsq-loading-container {
height: 130px;
padding-top: 120px;
}

.dsq-spinner {
z-index: 500;

border: 3px solid transparent;
border-color: transparent #c2c9d4 transparent #c2c9d4;

@keyframes rotate-loading {
0% {
transform: rotate(0deg);
animation: rotate-loading 1.2s linear 0s infinite normal;
transform-origin: 50% 50%;

margin: auto;
width: 25px;
height: 25px;

border-radius: 28px;
}

100% {
transform: rotate(360deg);
@keyframes rotate-loading {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}
}

.dsq-installation__instruction-list {
padding-left: 0px;
counter-reset: li 0;
margin: 35px 0px 0px 70px;
}
.dsq-installation__instruction-list {
padding-left: 0px;
counter-reset: li 0;
margin: 35px 0px 0px 70px;
}

.dsq-installation__instruction-list::before, .installation__instruction-list::after {
content: " ";
display: table;
}
.dsq-installation__instruction-list::before, .installation__instruction-list::after {
content: " ";
display: table;
}

.dsq-installation__instruction-list > li {
font-size: 16px;
line-height: 1.5em;
position: relative;
z-index: 200;
margin-bottom: 40px;
list-style: none;
}
.dsq-installation__instruction-list > li {
font-size: 16px;
line-height: 1.5em;
position: relative;
z-index: 200;
margin-bottom: 40px;
list-style: none;
}

.dsq-installation__instruction-list > li::before {
content: counter(li);
counter-increment: li 1;
position: absolute;
top: -8px;
left: -65px;
width: 40px;
height: 22px;
margin-right: 8px;
color: rgb(255, 255, 255);
font-size: 21px;
font-weight: 600;
text-align: center;
padding: 0.42em 0px;
background: rgb(255, 211, 79);
border-radius: 1em;
}
.dsq-installation__instruction-list > li::before {
content: counter(li);
counter-increment: li 1;
position: absolute;
top: -8px;
left: -65px;
width: 40px;
height: 22px;
margin-right: 8px;
color: rgb(255, 255, 255);
font-size: 21px;
font-weight: 600;
text-align: center;
padding: 0.42em 0px;
background: rgb(255, 211, 79);
border-radius: 1em;
}

.dsq-icon-support {
font-size: 72px;
width: 72px;
height: 72px;
display: block;
margin: 0 auto 5px auto;
}
.dsq-icon-support {
font-size: 72px;
width: 72px;
height: 72px;
display: block;
margin: 0 auto 5px auto;
}

.dsq-support-list-container {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.dsq-support-list-container {
display: flex;
flex-wrap: wrap;
list-style: none;
}

.dsq-support-list-item {
text-align: center;
padding: 10px 30px;
}
.dsq-support-list-item {
text-align: center;
padding: 10px 30px;
}

.dsq-support-list-item a {
text-decoration: none;
font-size: 14px;
.dsq-support-list-item a {
text-decoration: none;
font-size: 14px;
&:hover {
border-bottom: 1px var(--disqus-blue) solid;
background-color: transparent;
color: var(--disqus-blue);
}
}
}
Loading

0 comments on commit 2932e0f

Please sign in to comment.