Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update UI #19

Merged
merged 3 commits into from
Jul 9, 2024
Merged

Update UI #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5021c12
Remove duration strings
wpalani Jul 6, 2024
50963f7
Update survey UI
wpalani Jul 6, 2024
defa2e6
Improve tests
wpalani Jul 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions includes/DeactivationSurvey.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,6 @@ public function __construct() {
__( 'Need Help? Check the <a href="%s">help center</a> for support.', 'wp-module-deactivation' ),
'/wp-admin/admin.php?page=' . container()->plugin()->id . '#/help'
),
'durationOption1' => __( '1 Hour','wp-module-deactivation' ),
'durationOption1Value' => __( '1_hour','wp-module-deactivation' ),
'durationOption2' => __( '24 Hours','wp-module-deactivation' ),
'durationOption2Value' => __( '24_hours','wp-module-deactivation' ),
'durationOption3' => __( 'Until I turn it back on','wp-module-deactivation' ),
'durationOption3Value' => __( 'until_manual','wp-module-deactivation' ),
);

// Merge defaults with container values from plugin
Expand Down
231 changes: 116 additions & 115 deletions static/css/deactivation-survey.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
display: flex;
justify-content: center;
z-index: 100000;
--nfd-deactivation-overlay: rgba(43, 46, 56, 0.9);
--nfd-deactivation-background: #F8F8F8;
--nfd-deactivation-title: #242424;
--nfd-deactivation-text: #6C6B6B;
}

#nfd-deactivation-survey * {
Expand All @@ -39,137 +43,95 @@

.nfd-deactivation-survey__overlay {
animation: nfd-fade-in 200ms both;
background-color: rgba(43, 46, 56, 0.9);
background-color: var(--nfd-deactivation-overlay);
}

.nfd-deactivation-survey__disabled {
z-index: 2;
}

.nfd-deactivation-survey__container {
animation: nfd-fade-in 400ms 200ms both, nfd-slide-up 400ms 200ms both;
background-color: white;
border-radius: 5px;
background-color: var(--nfd-deactivation-background);
color: #3C434A;
max-height: 80vh;
max-width: 1024px;
max-height: 90dvh;
max-width: 780px;
border-radius: 5px;
position: relative;
width: 80vw;
overflow-y: auto;
overflow-x: hidden;
animation: nfd-fade-in 400ms 200ms both, nfd-slide-up 400ms 200ms both;
}

.nfd-deactivation__content {
align-items: center;
background-color: #f9f9f6;
display:flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
justify-content: center;
text-align: center;
}

.nfd-deactivation-form {
width: 100%;
gap: 1.5rem;
width: 700px;
min-height: 500px;
padding: 2rem;
}

.nfd-deactivation__header,
.nfd-deactivation__body,
.nfd-deactivation__footer-content,
.nfd-deactivation-fieldset {
padding: 0 4rem;
margin: 0 auto;
max-width: 90%;
}

.nfd-deactivation__header {
margin-top: 2rem;
text-align: center;
width: 100%;
}

.nfd-deactivation__body {
margin: 1rem auto;
text-align: left;
width: 100%;
}

.nfd-deactivation__footer {
background-color: #fff;
border-top: 1px solid #dcdcde;
margin-top: 1rem;
width: 100%;
}

.nfd-deactivation__footer-content {
padding-top: .5rem;
padding-bottom: .5rem
margin: 0 auto;
max-width: 99%;
}

.nfd-deactivation__content-title {
font-size: 2.5rem;
.nfd-deactivation__header-title {
font-size: 2.1rem;
font-weight: 500;
line-height: 1.1em;
margin: 0 0 .75rem;
color: var(--nfd-deactivation-title);
}

.nfd-deactivation__content-subtitle {
font-size: 1.25rem;
.nfd-deactivation__header-subtitle {
font-size: 1.1rem;
line-height: 1.25em;
margin: 0;
color: var(--nfd-deactivation-text);
}

.nfd-deactivation__helptext {
font-size: 1.0rem;
padding-right: 3rem;
text-align: left;
}

.nfd-deactivation-survey__content {
padding: 1.5rem;
.nfd-deactivation__cards {
display: flex;
flex-direction: column;
gap: 1rem;
}

.nfd-deactivation__card {
align-items: center;
background-color: #fff;
border: none;
border-radius: 3px;
box-shadow: 0 0 15px #e2e2df;
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: left;
margin: 0 auto 1rem;
max-width: 100%;
padding: 1rem 2rem;
background-color: white;
text-align: left;
padding: 10px;
border: 1px solid #EBECF4;
border-radius: 4px;
}

.nfd-deactivation__card-title {
font-size: 1.25rem;
font-weight: 600;
color: #111111;
font-size: 1rem;
font-weight: 500;
color: var(--nfd-deactivation-title);
}

.nfd-deactivation__card-desc {
color: #000000;
}

.nfd-deactivation-fieldset {
border-top: 1px solid #dcdcde;
display: flex;
flex-direction: column;
padding-top: 1rem;
text-align: left;
gap: .75rem;
color: var(--nfd-deactivation-text);
}

.nfd-deactivation-label {
font-size: 1rem;
font-weight: 600;
}

.nfd-deactivation-textarea {
font-size: 1rem;
padding: .5em;
min-height: 10vh;
width: 100%;
}


.nfd-deactivation-survey__container button[aria-label="Close dialog"] {
border: none;
background-color: transparent;
Expand All @@ -183,50 +145,65 @@
top: 5px;
}

.nfd-deactivation-survey__content-header h3 {
color: #3C434A;
font-size: 1rem;
margin: 0 0 .45rem;
.nfd-deactivation-form {
width: 100%;
}

.nfd-deactivation-survey__content form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
width: 100%;
.nfd-deactivation-form .nfd-deactivation__body {
width: 85%;
}

.nfd-deactivation-survey__content form label {
.nfd-deactivation-fieldset {
border-top: 1px solid #dcdcde;
padding-top: 1rem;
text-align: left;
}

.nfd-deactivation-form label {
display: inline-block;
font-weight: 500;
margin-bottom: 8px;
}

.nfd-deactivation-survey__content form textarea {
.nfd-deactivation-form textarea {
border-color: #8B8F94;
max-height: 150px;
min-height: 60px;
min-height: 75px;
padding: 8px;
width: 100%;
}

.nfd-deactivation-survey__content form textarea::placeholder {
.nfd-deactivation-form textarea::placeholder {
font-size: 13px;
}

.nfd-deactivation-survey__content-actions {
align-items: center;
.nfd-deactivation__footer {
padding-top: 1.3rem;
display: flex;
flex-direction: column;
gap: .75rem;
}

.nfd-deactivation__footer-actions {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
justify-content: space-between;
}

.nfd-deactivation-survey__content-actions > div {
align-items: center;
.nfd-deactivation__footer-actions > div {
display: flex;
justify-content: center;
align-items: center;
gap: .75rem;
}

.nfd-deactivation__helptext p {
color: var(--nfd-deactivation-text);
font-size: .9rem;
margin: 0;
}

.nfd-deactivation-survey-action {
background-color: transparent;
border: none;
Expand Down Expand Up @@ -268,28 +245,52 @@
width: 20%;
}

.nfd-deactivation__step {
position: absolute;
bottom: 15px;
right: 15px;
color: #8b8e9a;
font-size: 16px;
letter-spacing: 2.5px;
user-select: none;
}

/* mobile */
@media screen and (max-width: 600px) {
.nfd-deactivation-survey__container,
.nfd-deactivation-survey__container[data-step="1"] {
max-height: 100vh;
max-width: 100vw;
width: 100%;
@media screen and (max-width: 780px) {
.nfd-deactivation-survey__container {
max-width: 95vw;
}

.nfd-deactivation__header,
.nfd-deactivation__body,
.nfd-deactivation__footer-content,
.nfd-deactivation-fieldset {
padding: 0 2rem;
.nfd-deactivation__content {
max-width: 100%;
padding: 1.2rem;
gap: 1rem;
}
}

@media screen and (max-width: 600px) {
.nfd-deactivation-survey__container {
overflow: scroll;
.nfd-deactivation__header-title {
font-size: 1.6rem;
}

.nfd-deactivation__header-subtitle {
font-size: 1rem;
}

.nfd-deactivation__cards {
gap: .75rem;
}

.nfd-deactivation__card-title {
font-size: .9rem;
}

.nfd-deactivation-form .nfd-deactivation__body {
width: 99%;
}
}

.nfd-deactivation-form textarea {
max-height: 75px;
}
}

/* animations */
@keyframes nfd-submitting {
Expand Down
Loading
Loading