Settings style updates: Crayons! (#7393)
* . * . * . * snapshot * whoops * halifax * tests * little fixes * little fixes * test? i guess.. * . * minor fixes * Update schema.rb * Use shared logo_design in new org partial * little fix * Fix org spec * decrayonsifying rich-selector * if statement Co-authored-by: rhymes <rhymesete@gmail.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
4499e5eb6e
commit
16560d9ef1
41 changed files with 1427 additions and 2055 deletions
1
app/assets/images/copy.svg
Normal file
1
app/assets/images/copy.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z" /></svg>
|
||||
|
After Width: | Height: | Size: 275 B |
33
app/assets/stylesheets/base/layout.scss
Normal file
33
app/assets/stylesheets/base/layout.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
@import '../config/import';
|
||||
|
||||
:root {
|
||||
--layout-sidebar-width: 200px;
|
||||
--layout-gap: #{$su-6};
|
||||
--layout-padding: #{$su-6};
|
||||
}
|
||||
|
||||
.crayons-layout {
|
||||
font-size: $fs-base; // todo: drop it when ready
|
||||
width: 100%;
|
||||
max-width: $site-width;
|
||||
margin: 0 auto;
|
||||
|
||||
&__sidebar {
|
||||
}
|
||||
|
||||
&__content {
|
||||
}
|
||||
|
||||
&--max-l {
|
||||
max-width: $breakpoint-l;
|
||||
}
|
||||
}
|
||||
|
||||
.crayons-layout--default {
|
||||
@media (min-width: $breakpoint-s) {
|
||||
display: grid;
|
||||
grid-gap: var(--layout-gap);
|
||||
grid-template-columns: var(--layout-sidebar-width) 1fr;
|
||||
padding: var(--layout-padding);
|
||||
}
|
||||
}
|
||||
32
app/assets/stylesheets/components/banners.scss
Normal file
32
app/assets/stylesheets/components/banners.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
@import '../config/import';
|
||||
@import '../base/boxes';
|
||||
|
||||
.crayons-banner {
|
||||
padding: $su-4;
|
||||
border-bottom: 1px solid;
|
||||
text-align: center;
|
||||
font-size: $fs-base;
|
||||
background: var(--base-90);
|
||||
color: var(--base-0);
|
||||
|
||||
&--brand {
|
||||
background: var(--accent-brand);
|
||||
border-bottom-color: var(--accent-brand-darker);
|
||||
}
|
||||
|
||||
&--success {
|
||||
background: var(--accent-success);
|
||||
border-bottom-color: var(--accent-success-darker);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: var(--accent-warning);
|
||||
border-bottom-color: var(--accent-warning-darker);
|
||||
}
|
||||
|
||||
&--error {
|
||||
background: var(--accent-danger);
|
||||
border-bottom-color: var(--accent-danger-darker);
|
||||
color: var(--body-color-inverted);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
@import '../config/import';
|
||||
|
||||
%form-styling {
|
||||
--border-width: 1px;
|
||||
background-color: var(--form-bg);
|
||||
border: 1px solid var(--form-border);
|
||||
border: var(--border-width) solid var(--form-border);
|
||||
color: var(--body-color);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
// Text inputs and textareas.
|
||||
.crayons-textfield {
|
||||
line-height: $lh-base;
|
||||
padding: 0.5em;
|
||||
padding: calc(0.5em - var(--border-width)) 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: $fs-base;
|
||||
width: 100%;
|
||||
|
|
@ -181,3 +182,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.crayons-color-selector {
|
||||
@extend %form-styling;
|
||||
padding: calc(0.5em - var(--border-width)) 0.5em;
|
||||
height: 40px;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
height: $su-6;
|
||||
width: $su-6;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
0
app/assets/stylesheets/components/rich-selectors.scss
Normal file
0
app/assets/stylesheets/components/rich-selectors.scss
Normal file
|
|
@ -205,7 +205,7 @@
|
|||
),
|
||||
(
|
||||
'grid-rows',
|
||||
'grid-template-columns',
|
||||
'grid-template-rows',
|
||||
(
|
||||
'none': none,
|
||||
'1': repeat(1, minmax(0, 1fr)),
|
||||
|
|
@ -228,6 +228,13 @@
|
|||
(),
|
||||
true
|
||||
),
|
||||
(
|
||||
'grid-items',
|
||||
'justify-items',
|
||||
('start': start, 'end': end, 'center': center, 'stretch': stretch),
|
||||
(),
|
||||
true
|
||||
),
|
||||
(
|
||||
'float',
|
||||
'float',
|
||||
|
|
@ -413,7 +420,15 @@
|
|||
(
|
||||
'w',
|
||||
'width',
|
||||
('0': 0, '25': 25%, '50': 50%, '100': 100%, 'auto': auto, 'full': 100vw, 'max': max-content),
|
||||
(
|
||||
'0': 0,
|
||||
'25': 25%,
|
||||
'50': 50%,
|
||||
'100': 100%,
|
||||
'auto': auto,
|
||||
'full': 100vw,
|
||||
'max': max-content
|
||||
),
|
||||
(),
|
||||
true
|
||||
),
|
||||
|
|
@ -427,6 +442,13 @@
|
|||
),
|
||||
('min-h', 'min-height', ('0': 0, '100': 100%, 'full': 100vh), (), true),
|
||||
('max-h', 'max-height', ('0': 0, '100': 100%, 'full': 100vh), (), true),
|
||||
(
|
||||
'max-w',
|
||||
'max-width',
|
||||
('0': 0, '25': 25%, '50': 50%, '75': 75%, '100': 100%),
|
||||
(),
|
||||
true
|
||||
),
|
||||
('m', 'margin', ('auto': auto, 'unset': unset, '0': 0), $spacing-units, true),
|
||||
('-m', 'margin', $negative-spacing-units, (), true),
|
||||
(
|
||||
|
|
@ -627,5 +649,6 @@
|
|||
(),
|
||||
true,
|
||||
null
|
||||
)
|
||||
),
|
||||
(null, 'all', ('reset': unset), (), false, null)
|
||||
);
|
||||
|
|
|
|||
6
app/assets/stylesheets/config/_import.scss
vendored
6
app/assets/stylesheets/config/_import.scss
vendored
|
|
@ -30,9 +30,9 @@ $colors: (
|
|||
'accent-success': var(--accent-success),
|
||||
'accent-success-darker': var(--accent-success-darker),
|
||||
'accent-success-lighter': var(--accent-success-lighter),
|
||||
'accent-warninig': var(--accent-warning),
|
||||
'accent-warninig-darker': var(--accent-warning-darker),
|
||||
'accent-warninig-lighter': var(--accent-warning-lighter),
|
||||
'accent-warning': var(--accent-warning),
|
||||
'accent-warning-darker': var(--accent-warning-darker),
|
||||
'accent-warning-lighter': var(--accent-warning-lighter),
|
||||
'accent-danger': var(--accent-danger),
|
||||
'accent-danger-darker': var(--accent-danger-darker),
|
||||
'accent-danger-lighter': var(--accent-danger-lighter),
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
@import 'base/reset';
|
||||
@import 'base/boxes';
|
||||
@import 'base/icons';
|
||||
@import 'base/layout';
|
||||
|
||||
@import 'components/avatars';
|
||||
@import 'components/banners';
|
||||
@import 'components/buttons';
|
||||
@import 'components/cards';
|
||||
@import 'components/dropdowns';
|
||||
|
|
|
|||
|
|
@ -3,530 +3,6 @@
|
|||
@import 'functions';
|
||||
$input-width: 650px;
|
||||
|
||||
#page-content.users-edit,
|
||||
#page-content.chat_channel_memberships-edit,
|
||||
#page-content.chat_channel_memberships-index,
|
||||
#page-content.users-update,
|
||||
#page-content.users-confirm_destroy,
|
||||
#page-content.organizations-create,
|
||||
#page-content.organizations-update {
|
||||
font-family: $helvetica;
|
||||
#notice {
|
||||
background: $green;
|
||||
color: black;
|
||||
padding: 40px 15px 40px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 700;
|
||||
font-size: 1.05em;
|
||||
&.error-notice {
|
||||
background: rgba(255, 80, 80, 0.7);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.user-settings-page {
|
||||
h1,
|
||||
h3,
|
||||
p {
|
||||
margin: 10px 0 !important;
|
||||
}
|
||||
width: 900px;
|
||||
max-width: 94%;
|
||||
margin: 0 auto;
|
||||
font-size: 15px;
|
||||
.finish-notice {
|
||||
background: rgb(102, 93, 162);
|
||||
max-width: 95%;
|
||||
padding: 25px 0px;
|
||||
text-align: center;
|
||||
margin: 0px 0px 25px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
.small {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
padding: 15px 5px 5px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
.field-notice {
|
||||
background: white;
|
||||
max-width: 95%;
|
||||
padding: 25px 0px;
|
||||
text-align: center;
|
||||
margin: 0px 0px 25px;
|
||||
color: $black;
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
border: 1px solid $light-medium-gray;
|
||||
box-shadow: $shadow;
|
||||
.small {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
padding: 15px 5px 5px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
.settings-hub {
|
||||
border-radius: 3px;
|
||||
list-style: none;
|
||||
font-size: 20px;
|
||||
font-family: $helvetica-condensed;
|
||||
font-stretch: condensed;
|
||||
margin: 0px 0px;
|
||||
line-height: 33px;
|
||||
padding-left: 4px;
|
||||
width: 97%;
|
||||
margin-bottom: 15px;
|
||||
@media screen and (min-width: 514px) {
|
||||
width: 90%;
|
||||
margin: 0px auto;
|
||||
}
|
||||
@media screen and (min-width: 835px) {
|
||||
float: left;
|
||||
width: 250px;
|
||||
}
|
||||
.single-settings-tab {
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
color: var(--body-color);
|
||||
&.selected {
|
||||
@include themeable(
|
||||
background,
|
||||
theme-container-accent-background,
|
||||
$purple
|
||||
);
|
||||
}
|
||||
@media screen and (min-width: 514px) {
|
||||
width: 210px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.settings-form {
|
||||
margin: 0px auto 50px;
|
||||
width: 94%;
|
||||
max-width: 700px;
|
||||
float: left;
|
||||
h2 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
@media screen and (min-width: 835px) {
|
||||
width: 66%;
|
||||
}
|
||||
}
|
||||
#error_explanation {
|
||||
max-width: calc(95% - 18px);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.big-button {
|
||||
display: inline-block;
|
||||
width: 561px;
|
||||
max-width: calc(100% - 18px);
|
||||
padding: 10px 0px;
|
||||
padding-left: 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 1.2em;
|
||||
img {
|
||||
vertical-align: -3px;
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
}
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 14px 0px 8px;
|
||||
}
|
||||
.field {
|
||||
input[type='checkbox'] {
|
||||
margin-top: 15px;
|
||||
display: inline;
|
||||
width: 100px;
|
||||
}
|
||||
select {
|
||||
margin-top: 15px;
|
||||
}
|
||||
&.checkbox-label-first {
|
||||
label {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.field-notice {
|
||||
text-align: right;
|
||||
.field-notice-inner {
|
||||
width: 550px;
|
||||
max-width: calc(100% - 2vw);
|
||||
background: $red;
|
||||
color: white;
|
||||
padding: 1vw;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
line-height: 1.5em;
|
||||
margin-top: 10px;
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.theme-selector-field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.settings-color-select-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.color-select-fields {
|
||||
width: 50%;
|
||||
.select-field-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.color-select-textbox {
|
||||
flex: 1;
|
||||
min-width: 70px;
|
||||
border-radius: 0px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
input[type='color'] {
|
||||
box-sizing: border-box;
|
||||
border-radius: 0px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
padding: 3px;
|
||||
width: 50px;
|
||||
height: 48px;
|
||||
margin-left: -1px;
|
||||
border: 1px solid rgb(222, 230, 233);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.color-select-preview {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
#color-select-preview-logo {
|
||||
padding: 25px 20px;
|
||||
border-radius: 7px;
|
||||
margin-top: 20px;
|
||||
display: none; /* Changes to inline-block when javascript loads preview */
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 0px 20px;
|
||||
max-width: 750px;
|
||||
font-size: 17px;
|
||||
.sub-field {
|
||||
display: inline-block;
|
||||
}
|
||||
label {
|
||||
width: auto;
|
||||
display: inline;
|
||||
padding: 0px;
|
||||
}
|
||||
input {
|
||||
display: inline;
|
||||
width: 30px;
|
||||
}
|
||||
.field-explainer {
|
||||
opacity: 0.7;
|
||||
margin: 8px auto;
|
||||
width: 87%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
.field_with_errors {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
max-width: 100%;
|
||||
input {
|
||||
border: 2px solid rgb(237, 65, 65);
|
||||
background: rgb(252, 241, 243);
|
||||
}
|
||||
}
|
||||
form {
|
||||
input {
|
||||
width: $input-width;
|
||||
max-width: calc(100% - 30px);
|
||||
padding: 12px;
|
||||
font-size: 19px;
|
||||
border: 1px solid rgb(222, 230, 233);
|
||||
border-radius: 3px;
|
||||
&[type='file'] {
|
||||
border: 0px;
|
||||
}
|
||||
&[type='submit'] {
|
||||
width: 255px;
|
||||
max-width: 100%;
|
||||
padding: 14px 0px;
|
||||
margin-top: 20px;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
&.danger-button {
|
||||
background: $red;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
}
|
||||
select {
|
||||
display: block;
|
||||
font-size: 19px;
|
||||
width: $input-width;
|
||||
max-width: calc(100% - 4px);
|
||||
padding: 12px;
|
||||
border: 1px solid rgb(222, 230, 233);
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
}
|
||||
button.big-action {
|
||||
width: 130px;
|
||||
padding: 3px 0px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
&:hover {
|
||||
opacity: 0.88;
|
||||
}
|
||||
cursor: pointer;
|
||||
&.danger-button {
|
||||
background-color: #b30000;
|
||||
color: $white;
|
||||
}
|
||||
&:disabled {
|
||||
background-color: $light-medium-gray;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
img {
|
||||
vertical-align: -3px;
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
}
|
||||
}
|
||||
.image-present {
|
||||
@media screen and (max-width: 700px) {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
border-radius: 70px;
|
||||
&.nav-image-version {
|
||||
height: auto;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
input {
|
||||
width: 497px;
|
||||
max-width: calc(100% - 84px);
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
border: 1px solid rgb(222, 230, 233);
|
||||
width: $input-width;
|
||||
max-width: calc(100% - 30px);
|
||||
padding: 12px;
|
||||
border-radius: 3px;
|
||||
height: 120px;
|
||||
font-size: 16px;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
%inline-button-form {
|
||||
display: inline-block;
|
||||
input[type='submit'] {
|
||||
display: inline-block;
|
||||
font-size: 17px;
|
||||
border: 0px;
|
||||
border-radius: 100px;
|
||||
padding: 2px 10px;
|
||||
width: auto;
|
||||
margin: 0px;
|
||||
margin-left: 5px;
|
||||
color: white;
|
||||
background: $black;
|
||||
}
|
||||
}
|
||||
.inline-button-form {
|
||||
@extend %inline-button-form;
|
||||
}
|
||||
.inline-button-form-hidden {
|
||||
display: none;
|
||||
}
|
||||
h2 {
|
||||
font-size: calc(40px + 1vw);
|
||||
font-family: $helvetica-condensed;
|
||||
font-stretch: condensed;
|
||||
a {
|
||||
color: $black;
|
||||
background: $yellow;
|
||||
}
|
||||
.organization-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: $black;
|
||||
background: $yellow;
|
||||
}
|
||||
select {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
vertical-align: baseline;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-stretch: inherit;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding-right: 1.25em;
|
||||
text-indent: 0.01px;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
text-overflow: '';
|
||||
}
|
||||
.organization-dropdown::before,
|
||||
.organization-dropdown::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.organization-dropdown::after {
|
||||
/* Custom dropdown arrow */
|
||||
content: '\25BC';
|
||||
height: 1em;
|
||||
font-size: 0.625em;
|
||||
line-height: 1;
|
||||
right: 0.25em;
|
||||
top: 50%;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
.organization-dropdown::before {
|
||||
/* Custom dropdown arrow cover */
|
||||
width: 1em;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.secret-field {
|
||||
margin: 30px 0px;
|
||||
}
|
||||
hr {
|
||||
opacity: 0.3;
|
||||
margin-top: 20px;
|
||||
width: 70%;
|
||||
}
|
||||
.single-app-integration {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--card-color-tertiary);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
sup {
|
||||
color: var(--card-color-tertiary);
|
||||
}
|
||||
img {
|
||||
height: 1em;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.default-billing-message {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.stripe-button-wrapper {
|
||||
height: 40px;
|
||||
}
|
||||
.credit-card-button {
|
||||
background: lighten($blue, 3%);
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
border: 1px solid darken($blue, 8%);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 1.3em;
|
||||
box-shadow: inset 0 -5px 5px darken($blue, 2%);
|
||||
&:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
.remove-card {
|
||||
background: lighten($red, 3%);
|
||||
}
|
||||
}
|
||||
.billing-history-header {
|
||||
margin-top: 35px;
|
||||
font-size: 2em;
|
||||
border-bottom: 5px solid $black;
|
||||
padding: 5px;
|
||||
width: 270px;
|
||||
}
|
||||
.billing-item {
|
||||
padding: 10px 5px;
|
||||
border-bottom: 1px solid $light-medium-gray;
|
||||
margin-top: 5px;
|
||||
font-size: 1.3em;
|
||||
&:hover {
|
||||
background: $light-gray;
|
||||
}
|
||||
.billing-item-detail {
|
||||
display: inline-block;
|
||||
color: $medium-gray;
|
||||
font-size: 0.8em;
|
||||
margin-top: 6px;
|
||||
margin-right: 6px;
|
||||
background: $light-gray;
|
||||
padding: 3px 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $light-medium-gray;
|
||||
&.billing-item-green {
|
||||
color: $green;
|
||||
}
|
||||
&.billing-item-blue {
|
||||
color: $blue;
|
||||
}
|
||||
&.billing-item-red {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
form {
|
||||
display: inline-block;
|
||||
button {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $blue;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-hr {
|
||||
opacity: 0.3;
|
||||
width: 570px;
|
||||
max-width: 98%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.github-repos {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
|
@ -607,130 +83,6 @@ $input-width: 650px;
|
|||
}
|
||||
}
|
||||
|
||||
.settings-org-members {
|
||||
margin-bottom: 50px;
|
||||
width: 550px;
|
||||
max-width: 92%;
|
||||
h3 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.settings-org-member-row {
|
||||
padding: 10px;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: $light-gray;
|
||||
margin: 3px 0px;
|
||||
border-left: 5px solid darken($light-gray, 5%);
|
||||
&.settings-org-admin-row {
|
||||
border-left: 5px solid $green;
|
||||
background: $light-green;
|
||||
}
|
||||
.settings-org-member-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
form {
|
||||
display: inline-block;
|
||||
}
|
||||
.settings-org-member {
|
||||
background: $green;
|
||||
color: white;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7em;
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
&.settings-org-member-admin-self {
|
||||
cursor: default;
|
||||
background: $medium-gray;
|
||||
}
|
||||
&.settings-org-member-admin-other {
|
||||
background: $green;
|
||||
cursor: default;
|
||||
}
|
||||
&.settings-org-member-make-admin {
|
||||
color: $green;
|
||||
background: $light-green;
|
||||
border: 1px solid $green;
|
||||
}
|
||||
&.settings-org-member-remove {
|
||||
color: $red;
|
||||
background: lighten($red, 36%);
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
color: $medium-gray;
|
||||
font-size: 0.9em;
|
||||
margin-top: -18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.settings-org-secret {
|
||||
overflow-x: scroll;
|
||||
padding: 7px;
|
||||
border: 1px dashed $medium-gray;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.settings-generate-new-secret {
|
||||
margin-top: 10px;
|
||||
background: $black;
|
||||
color: white;
|
||||
border: 0px;
|
||||
padding: 4px 14px;
|
||||
border-radius: 3px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: lighten($black, 14%);
|
||||
}
|
||||
}
|
||||
clipboard-copy {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
img {
|
||||
max-width: 26px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.copy-text-announcer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-form-userlist {
|
||||
.settings-form-userlistrow {
|
||||
font-size: 18px;
|
||||
padding: 6px 0px;
|
||||
min-height: 33px;
|
||||
display: block;
|
||||
@include themeable(color, theme-color, $black);
|
||||
a {
|
||||
@include themeable(color, theme-color, $black);
|
||||
}
|
||||
img {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
border-radius: 100px;
|
||||
vertical-align: -0.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
&:hover {
|
||||
.inline-button-form-hidden {
|
||||
@extend %inline-button-form;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signout_confirm-wrapper {
|
||||
padding: calc(15% + 50px) 2% 30%;
|
||||
text-align: center;
|
||||
|
|
@ -743,60 +95,6 @@ $input-width: 650px;
|
|||
}
|
||||
}
|
||||
|
||||
.org-widget-preview .primary-sticky-nav {
|
||||
margin-top: 10px;
|
||||
position: initial;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
ul.delete__account {
|
||||
li {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.api__secret {
|
||||
&__container {
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
height: auto;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $light-medium-gray;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
.title {
|
||||
color: $dark-gray;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.content {
|
||||
margin: 0;
|
||||
color: $medium-gray;
|
||||
font-weight: bold;
|
||||
font-family: $monospace;
|
||||
padding: 5px 8px;
|
||||
border: 1px dashed $black;
|
||||
overflow: hidden;
|
||||
margin: 3px 0px;
|
||||
}
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
color: $dark-medium-gray;
|
||||
}
|
||||
}
|
||||
|
||||
&__revoke {
|
||||
text-align: left;
|
||||
margin: 1rem auto 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.membership-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -833,14 +131,3 @@ ul.delete__account {
|
|||
.membership-purchase-link {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#page-content.chat_channel_memberships-edit,
|
||||
#page-content.chat_channel_memberships-index {
|
||||
#page-content-inner {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.notice {
|
||||
margin-top: -40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,249 +1,151 @@
|
|||
@import 'variables';
|
||||
@import 'config/import';
|
||||
@import 'fonts';
|
||||
|
||||
.rich-selector {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: var(--theme-container-border);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 16px;
|
||||
width: 220px;
|
||||
height: 124px;
|
||||
border-radius: 10px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.rich-selector:hover,
|
||||
.rich-selector:focus {
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.rich-selector * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rich-selector__radio:focus ~ .rich-selector__outline {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 7px;
|
||||
bottom: 1px;
|
||||
left: 7px;
|
||||
border: 4px solid $green;
|
||||
transform: scale(1.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.rich-selector__radio,
|
||||
.rich-selector__indicator {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.rich-selector__indicator {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
border-radius: 30px;
|
||||
background: $green;
|
||||
border: 2px solid darken($green, 10%);
|
||||
}
|
||||
|
||||
.rich-selector__radio:checked + .rich-selector__indicator {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
// Theme selector
|
||||
|
||||
.theme-selector__nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 23px;
|
||||
width: 220px;
|
||||
background: var(--header-bg);
|
||||
border-bottom: var(--theme-container-border);
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.theme-selector__search {
|
||||
width: 32%;
|
||||
height: 12px;
|
||||
background: var(--form-bg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.theme-selector__body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
width: 220px;
|
||||
background: var(--body-bg);
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.theme-selector__col,
|
||||
.theme-selector__col--center {
|
||||
width: 20%;
|
||||
height: 85%;
|
||||
background: var(--card-bg);
|
||||
border-radius: 2px;
|
||||
border: var(--theme-container-border);
|
||||
}
|
||||
|
||||
.theme-selector__col--center {
|
||||
text-align: center;
|
||||
color: var(--body-color);
|
||||
width: 35%;
|
||||
background: var(--body-bg);
|
||||
border: none;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.theme-selector__posts {
|
||||
height: calc(100% - 18px);
|
||||
background: var(--card-bg);
|
||||
border: var(--theme-container-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// Individual theme styles
|
||||
|
||||
.theme-selector--default {
|
||||
--body-bg: #f9f9fa;
|
||||
--body-color: #0a0a0a;
|
||||
--header-bg: #fdf9f3;
|
||||
--form-bg: #e8e7e7;
|
||||
--card-bg: #fff;
|
||||
--theme-container-border: 1px solid #d6d6d6;
|
||||
}
|
||||
|
||||
.theme-selector--night-theme {
|
||||
--body-bg: #0d1219;
|
||||
--body-color: #fff;
|
||||
--header-bg: #1c2938;
|
||||
--form-bg: #424a54;
|
||||
--card-bg: #202c3d;
|
||||
--theme-container-border: 1px solid #141d26;
|
||||
}
|
||||
|
||||
.theme-selector--pink-theme {
|
||||
--body-bg: #fff7f9;
|
||||
--body-color: #0a0a0a;
|
||||
--header-bg: #ff4983;
|
||||
--form-bg: #fff7f9;
|
||||
--card-bg: #fff;
|
||||
--theme-container-border: 1px solid #ff4983;
|
||||
}
|
||||
|
||||
.theme-selector--minimal-light-theme {
|
||||
--body-bg: #fcfcfc;
|
||||
--body-color: #0a0a0a;
|
||||
--header-bg: #ffffff;
|
||||
--form-bg: #f4f5f7;
|
||||
--card-bg: #fff;
|
||||
--theme-container-border: 1px solid #d6d6d6;
|
||||
}
|
||||
|
||||
.theme-selector--ten-x-hacker-theme {
|
||||
--body-bg: #0a0a0a;
|
||||
--body-color: #42ff87;
|
||||
--header-bg: #1c1c1c;
|
||||
--form-bg: #0a0a0a;
|
||||
--card-bg: #0a0a0a;
|
||||
--theme-container-border: 1px solid #42ff87;
|
||||
}
|
||||
|
||||
// Font selector
|
||||
|
||||
.font-selector {
|
||||
height: 1.3em;
|
||||
padding: 15px !important;
|
||||
font-size: 1.6em;
|
||||
line-height: 1.3em;
|
||||
width: 190px;
|
||||
background: var(--card-secondary-bg);
|
||||
border-radius: $br-default;
|
||||
border: 1px solid var(--base-10); // todo replace with functional variable
|
||||
padding: $su-4;
|
||||
}
|
||||
|
||||
// Font styles
|
||||
.font-selector--default {
|
||||
font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua',
|
||||
Georgia, serif;
|
||||
}
|
||||
|
||||
.font-selector--sans-serif {
|
||||
font-family: $helvetica;
|
||||
font-family: $ff-default;
|
||||
}
|
||||
|
||||
.font-selector--monospace {
|
||||
font-family: $monospace;
|
||||
font-family: $ff-accent;
|
||||
}
|
||||
|
||||
.font-selector--comic-sans {
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||||
font-size: 1.44em;
|
||||
}
|
||||
|
||||
.font-selector--open-dyslexic {
|
||||
font-family: OpenDyslexic, sans-serif;
|
||||
font-display: swap;
|
||||
font-size: 1.33em;
|
||||
}
|
||||
|
||||
// Navbar selector
|
||||
|
||||
.navbar-selector {
|
||||
height: 1.2em;
|
||||
padding: 10px 15px !important;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.1em;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
// Experience selector
|
||||
|
||||
.exp-selector {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
margin: calc(3px + 0.3vw);
|
||||
line-height: 55px !important;
|
||||
}
|
||||
|
||||
.exp-selector__indicator {
|
||||
top: -4px;
|
||||
right: 0px;
|
||||
left: -4px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
// Theme styles
|
||||
// Theme selector
|
||||
.theme-preview {
|
||||
width: 100%;
|
||||
border-radius: 100px;
|
||||
background: transparent;
|
||||
border: 4px solid $green !important;
|
||||
border-radius: $br-default;
|
||||
background: var(--preview-body-bg);
|
||||
color: var(--preview-body-color);
|
||||
overflow: hidden;
|
||||
font-size: $fs-s;
|
||||
line-height: 1;
|
||||
box-shadow: 0 0 0 1px var(--header-shadow);
|
||||
|
||||
&,
|
||||
& *,
|
||||
& * * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: $su-4;
|
||||
background: var(--preview-header);
|
||||
box-shadow: 0 1px 1px var(--preview-border);
|
||||
}
|
||||
|
||||
&__search {
|
||||
width: 33%;
|
||||
height: $su-2;
|
||||
background: var(--preview-form);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: grid;
|
||||
grid-gap: $su-1;
|
||||
grid-template-columns: 20% 1fr 20%;
|
||||
height: $su-9;
|
||||
padding: $su-1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__card {
|
||||
background: var(--preview-card);
|
||||
border-radius: 1px;
|
||||
display: flex;
|
||||
flex: 1 auto;
|
||||
box-shadow: 0 0 0 1px var(--preview-border);
|
||||
}
|
||||
}
|
||||
|
||||
.rich-selector__radio:focus ~ .exp-selector__outline {
|
||||
border-radius: 100px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border: 1px solid lighten($green, 15%) !important;
|
||||
z-index: -1;
|
||||
.theme-selector--default {
|
||||
--preview-body-bg: #f9f9fa;
|
||||
--preview-body-color: #0a0a0a;
|
||||
--preview-header: #fdf9f3;
|
||||
--preview-form: #e8e7e7;
|
||||
--preview-card: #fff;
|
||||
--preview-border: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// Editor selector
|
||||
|
||||
.editor-selector {
|
||||
height: 1.2em;
|
||||
padding: 10px 15px !important;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.1em;
|
||||
width: 190px;
|
||||
.theme-selector--night-theme {
|
||||
--preview-body-bg: #0d1219;
|
||||
--preview-body-color: #fff;
|
||||
--preview-header: #1c2938;
|
||||
--preview-form: #424a54;
|
||||
--preview-card: #202c3d;
|
||||
--preview-border: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.theme-selector--pink-theme {
|
||||
--preview-body-bg: #fff7f9;
|
||||
--preview-body-color: #0a0a0a;
|
||||
--preview-header: #fb4881;
|
||||
--preview-form: #fff7f9;
|
||||
--preview-card: #fff;
|
||||
--preview-border: #fb4881;
|
||||
}
|
||||
|
||||
.theme-selector--minimal-light-theme {
|
||||
--preview-body-bg: #fcfcfc;
|
||||
--preview-body-color: #0a0a0a;
|
||||
--preview-header: #ffffff;
|
||||
--preview-form: #f4f5f7;
|
||||
--preview-card: #fff;
|
||||
--preview-border: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.theme-selector--ten-x-hacker-theme {
|
||||
--preview-body-bg: #0a0a0a;
|
||||
--preview-body-color: #42ff87;
|
||||
--preview-header: #1c1c1c;
|
||||
--preview-form: #0a0a0a;
|
||||
--preview-card: #0a0a0a;
|
||||
--preview-border: #42ff87;
|
||||
}
|
||||
|
||||
// Experience
|
||||
.rich-selector--experience {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rich-selector-radio {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: -9999em;
|
||||
&:checked + .rich-selector--experience {
|
||||
border-color: var(--accent-brand);
|
||||
box-shadow: 0 0 0 1px var(--accent-brand);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
--header-bg: var(--base-40);
|
||||
--header-bg-hover: var(--base-50);
|
||||
--header-bg-current: var(--base-50);
|
||||
--header-shadow: transparent;
|
||||
--header-shadow: rgba(0,0,0,0.1);
|
||||
--header-icons-color: var(--base-10);
|
||||
--header-icons-color-hover: var(--base-0);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,99 +1,108 @@
|
|||
<% if flash[:settings_notice].present? %>
|
||||
<div class="notice" id="notice">
|
||||
<div class="crayons-banner">
|
||||
<%= flash[:settings_notice] %>
|
||||
</div>
|
||||
<% elsif flash[:error].present? %>
|
||||
<div class="notice error-notice" id="notice" style="text-align:center;color:red">
|
||||
ERROR
|
||||
<div class="crayons-banner crayons-banner--error">
|
||||
<%= flash[:error] %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="user-settings-page">
|
||||
<h1><%= @channel.channel_name %></h1>
|
||||
<% if @membership.role == "mod" %>
|
||||
<h3>You are a channel mod</h3>
|
||||
<% end %>
|
||||
<p>
|
||||
<%= @channel.description %>
|
||||
</p>
|
||||
<div class="settings-form">
|
||||
<div class="settings-form-userlist">
|
||||
<h3>Members</h3>
|
||||
<% @channel.active_memberships.includes(:user).each do |active_membership| %>
|
||||
<div class="settings-form-userlistrow">
|
||||
<a href="<%= active_membership.user.path %>"><img src="<%= ProfileImage.new(active_membership.user).get(width: 90) %>" /><%= active_membership.user.name %></a>
|
||||
<% if @membership.role == "mod" && active_membership.role != "mod" %>
|
||||
<%= form_tag "/chat_channel_memberships/remove_membership", class: "inline-button-form-hidden" do %>
|
||||
<%= hidden_field_tag(:chat_channel_id, @channel.id) %>
|
||||
<%= hidden_field_tag(:membership_id, active_membership.id) %>
|
||||
<%= submit_tag "×" %>
|
||||
|
||||
<div class="p-4">
|
||||
<header class="mb-4 grid gap-2">
|
||||
<h2><%= @channel.channel_name %></h2>
|
||||
<p><%= @channel.description %></p>
|
||||
<% if @membership.role == "mod" %>
|
||||
<p class="fw-bold">You are a channel mod</p>
|
||||
<% end %>
|
||||
</header>
|
||||
|
||||
<div class="p-4 grid gap-2 crayons-card mb-4">
|
||||
<h3 class="mb-2">Members</h3>
|
||||
<% @channel.active_memberships.includes(:user).each do |active_membership| %>
|
||||
<div class="flex items-center">
|
||||
<a href="<%= active_membership.user.path %>" class="flex items-center">
|
||||
<span class="crayons-avatar crayons-avatar--l mr-2">
|
||||
<img src="<%= ProfileImage.new(active_membership.user).get(width: 90) %>" class="crayons-avatar__image" />
|
||||
</span>
|
||||
<%= active_membership.user.name %>
|
||||
</a>
|
||||
<% if @membership.role == "mod" && active_membership.role != "mod" %>
|
||||
<%= form_tag "/chat_channel_memberships/remove_membership" do %>
|
||||
<%= hidden_field_tag(:chat_channel_id, @channel.id) %>
|
||||
<%= hidden_field_tag(:membership_id, active_membership.id) %>
|
||||
<button class="crayons-btn crayons-btn--icon-rounded crayons-btn--ghost" type="submit">×</button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if @membership.role == "mod" %>
|
||||
<div class="settings-form-userlist">
|
||||
<h3>Pending Invitations</h3>
|
||||
<% @channel.pending_memberships.includes(:user).each do |pending_membership| %>
|
||||
<div class="settings-form-userlistrow">
|
||||
<a href="<%= pending_membership.user.path %>"><img src="<%= ProfileImage.new(pending_membership.user).get(width: 90) %>" /><%= pending_membership.user.name %></a>
|
||||
<%= form_tag "/chat_channel_memberships/remove_membership", class: "inline-button-form" do %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if @membership.role == "mod" %>
|
||||
<div class="crayons-card p-4 grid gap-2 mb-4">
|
||||
<h3>Pending Invitations</h3>
|
||||
<% @channel.pending_memberships.includes(:user).each do |pending_membership| %>
|
||||
<div class="flex items-center">
|
||||
<a href="<%= pending_membership.user.path %>">
|
||||
<span class="crayons-avatar crayons-avatar--l mr-2">
|
||||
<img src="<%= ProfileImage.new(pending_membership.user).get(width: 90) %>" class="crayons-avatar__image" />
|
||||
</span>
|
||||
<%= pending_membership.user.name %>
|
||||
</a>
|
||||
<%= form_tag "/chat_channel_memberships/remove_membership" do %>
|
||||
<%= hidden_field_tag(:status, "pending") %>
|
||||
<%= hidden_field_tag(:chat_channel_id, @channel.id) %>
|
||||
<%= hidden_field_tag(:membership_id, pending_membership.id) %>
|
||||
<%= submit_tag "×" %>
|
||||
<button class="crayons-btn crayons-btn--icon-rounded crayons-btn--ghost" type="submit">×</button>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if @channel.private_org_channel? %>
|
||||
<p><em>Invite new members by <a href="/settings/organization">inviting them to this organization.</a></em></p>
|
||||
<% else %>
|
||||
<%= form_for ChatChannelMembership.new do |f| %>
|
||||
<div class="field">
|
||||
<%= form_for ChatChannelMembership.new, html: { class: "grid gap-4" } do |f| %>
|
||||
<div class="crayons-field">
|
||||
<%= f.hidden_field :chat_channel_id, value: @channel.id %>
|
||||
<%= f.label "Usernames to Invite" %>
|
||||
<%= f.text_field :invitation_usernames, placeholder: "Comma separated" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
<%= f.label "Usernames to Invite", class: "crayons-field__label" %>
|
||||
<%= f.text_field :invitation_usernames, placeholder: "Comma separated", class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div><button type="submit" class="crayons-btn">Submit</button></div>
|
||||
<% end %>
|
||||
<hr class="settings-hr" />
|
||||
<h1>Channel Settings</h1>
|
||||
|
||||
<h3>Channel Settings</h3>
|
||||
<%= form_for(@channel) do |f| %>
|
||||
<div class="field">
|
||||
<%= f.label :description %>
|
||||
<%= f.text_area :description %>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :description, class: "crayons-field__label" %>
|
||||
<%= f.text_area :description, class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
<div>
|
||||
<button type="submit" class="crayons-btn">Submit</button>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<hr class="settings-hr" />
|
||||
<h1>Personal Settings</h1>
|
||||
<h3>Notifications</h3>
|
||||
<%= form_for(@membership) do |f| %>
|
||||
<div class="field">
|
||||
<%= f.label :show_global_badge_notification, "Receive Notifications for New Messages" %>
|
||||
<%= f.check_box :show_global_badge_notification %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="crayons-card p-4 grid gap-2 mb-4">
|
||||
<h3>Personal Settings</h3>
|
||||
<h4>Notifications</h4>
|
||||
<%= form_for @membership, html: { class: "mb-4 grid gap-2" } do |f| %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :show_global_badge_notification, class: "crayons-checkbox" %>
|
||||
<%= f.label :show_global_badge_notification, "Receive Notifications for New Messages", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<div><button class="crayons-btn" type="submit">Submit</button></div>
|
||||
<% end %>
|
||||
<hr class="settings-hr" />
|
||||
</div>
|
||||
|
||||
<div class="crayons-card grid gap-2 p-4">
|
||||
<% if @membership.role == "mod" %>
|
||||
<p>Questions about Connect Channel moderation? Contact <a href="mailto:<%= SiteConfig.default_site_email %>"><%= SiteConfig.default_site_email %></a></p>
|
||||
<% else %>
|
||||
<h3>Danger Zone</h3>
|
||||
<%= form_for(@membership, html: { method: :delete, onsubmit: "return confirm('Are you absolutely sure you want to leave this channel? This action is permanent.');" }) do |f| %>
|
||||
<div class="field">
|
||||
<%= f.submit "LEAVE CHANNEL", class: "cta cta-danger" %>
|
||||
</div>
|
||||
<div><button class="crayons-btn crayons-btn--danger" type="submit">Leave Channel</button></div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,10 @@
|
|||
<%= f.submit "Decline", class: "cta cta-danger" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<hr class="settings-hr"/>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<p>
|
||||
<em>You have no pending invitations</em>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,30 @@
|
|||
<div class="settings-color-select-container">
|
||||
<div class="color-select-fields">
|
||||
<div class="field">
|
||||
<% account.bg_color_hex = user_colors(account)[:bg] if account.bg_color_hex.blank? %>
|
||||
<% account.text_color_hex = user_colors(account)[:text] if account.text_color_hex.blank? %>
|
||||
<%= f.label :bg_color_hex, "background color" %><br>
|
||||
<div class="select-field-wrapper">
|
||||
<%= f.text_field :bg_color_hex, placeholder: "#000000", class: "color-select-textbox", id: "bg-color-textfield" %>
|
||||
<input id="bg-color-colorfield" type="color">
|
||||
<div class="grid gap-6 m:grid-cols-2">
|
||||
<div class="grid gap-6">
|
||||
<% account.bg_color_hex = user_colors(account)[:bg] if account.bg_color_hex.blank? %>
|
||||
<% account.text_color_hex = user_colors(account)[:text] if account.text_color_hex.blank? %>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :bg_color_hex, "Brand color 1", class: "crayons-field__label" %>
|
||||
<p class="crayons-field__description">Used for backgrounds, borders etc.</p>
|
||||
<div class="flex items-center">
|
||||
<%= f.text_field :bg_color_hex, placeholder: "#000000", class: "crayons-textfield mr-2", id: "bg-color-textfield" %>
|
||||
<input id="bg-color-colorfield" type="color" class="crayons-color-selector">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
||||
<div class="crayons-field">
|
||||
<% account.bg_color_hex = user_colors(account)[:text] if account.text_color_hex.blank? %>
|
||||
<%= f.label :text_color_hex, "text color" %><br>
|
||||
<div class="select-field-wrapper">
|
||||
<%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "color-select-textbox", id: "text-color-textfield" %>
|
||||
<input id="text-color-colorfield" type="color">
|
||||
<%= f.label :text_color_hex, "Brand color 2", class: "crayons-field__label" %>
|
||||
<p class="crayons-field__description">Used for texts (usually put on <em>Brand color 1</em>).</p>
|
||||
<div class="flex items-center">
|
||||
<%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "crayons-textfield mr-2", id: "text-color-textfield" %>
|
||||
<input id="text-color-colorfield" type="color" class="crayons-color-selector">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-select-preview">
|
||||
<span style="display:block;">PREVIEW</span>
|
||||
<svg id="color-select-preview-logo" xmlns="http://www.w3.org/2000/svg" version="1" width="90px" viewBox="0 0 132.000000 65.000000" role="img" aria-labelledby="aldzs1ucwkayuyoa6rxtxo2ikd8bpr0q" class="logo">
|
||||
|
||||
<div class="crayons-card crayons-card--secondary flex-1 p-6">
|
||||
<p class="text-uppercase color-base-50 mb-4 fs-s ff-accent">Preview:</p>
|
||||
<svg id="color-select-preview-logo" class="p-4 radius-default" xmlns="http://www.w3.org/2000/svg" version="1" width="128" viewBox="0 0 132.000000 65.000000" role="img">
|
||||
<title id="aldzs1ucwkayuyoa6rxtxo2ikd8bpr0q">App logo</title>
|
||||
<path d="M0 33v32h11.3c12.5 0 17.7-1.6 21.5-6.5 3.8-4.8 4.4-9 4-28-.3-16.8-.5-18.2-2.7-21.8C30.3 2.5 26.1 1 12 1H0v32zm23.1-19.1c2.3 1.9 2.4 2.3 2.4 18.5 0 15.7-.1 16.7-2.2 18.8-1.7 1.6-3.5 2.2-7 2.2l-4.8.1-.3-20.8L11 12h4.9c3.3 0 5.6.6 7.2 1.9zM46.1 3.6c-2 2.6-2.1 3.9-2.1 29.6v26.9l2.5 2.4c2.3 2.4 2.9 2.5 16 2.5H76V54.1l-10.2-.3-10.3-.3v-15l6.3-.3 6.2-.3V27H55V12h21V1H62.1c-13.9 0-14 0-16 2.6zM87 15.2c2.1 7.9 5.5 20.8 7.6 28.8 3.2 12.3 4.3 15 7 17.7 1.9 2 4.2 3.3 5.7 3.3 3.1 0 7.1-3.1 8.5-6.7 1-2.6 15.2-55.6 15.2-56.8 0-.3-2.8-.5-6.2-.3l-6.3.3-5.6 21.5c-3.5 13.6-5.8 20.8-6.2 19.5C105.9 40 96 1.9 96 1.4c0-.2-2.9-.4-6.4-.4h-6.4L87 15.2z">
|
||||
</path>
|
||||
|
|
|
|||
|
|
@ -1,108 +1,112 @@
|
|||
<%= render "users/additional_authentication" %>
|
||||
|
||||
<h2><%= community_name %> API Keys</h2>
|
||||
<p>You can generate personal API keys to use for authentication with the <%= community_name %> API. The API is still in early beta though. The <a href="https://docs.dev.to/api/"><%= community_name %> API documentation</a> contains further information.</a></p>
|
||||
<h3>Generate a new Key</h3>
|
||||
<%= form_tag users_api_secrets_path, method: :post do %>
|
||||
<%= fields_for :api_secret do |api_secret| %>
|
||||
<div class="field">
|
||||
<%= api_secret.label(:description, "Description") %>
|
||||
<%= api_secret.text_field(:description, placeholder: "What's this API key for?", required: true) %>
|
||||
<div class="crayons-card mb-6 p-6 grid gap-6">
|
||||
<header>
|
||||
<h2 class="mb-2"><%= community_name %> API Keys</h2>
|
||||
<p>You can generate personal API keys to use for authentication with the <%= community_name %> API. The API is still in early beta though. The <a href="https://docs.dev.to/api/"><%= community_name %> API documentation</a> contains further information.</a></p>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<h3 class="mb-2">Generate a new Key</h3>
|
||||
<%= form_tag users_api_secrets_path, method: :post do %>
|
||||
<%= fields_for :api_secret do |api_secret| %>
|
||||
<div class="crayons-field mb-6">
|
||||
<%= api_secret.label(:description, "Description", class: "crayons-field__label") %>
|
||||
<p class="crayons-field__description">What's this API key for?</p>
|
||||
<%= api_secret.text_field(:description, placeholder: "My Project Name", required: true, class: "crayons-textfield") %>
|
||||
</div>
|
||||
<% end %>
|
||||
<button class="crayons-btn crayon-btn--secondary" id="new__api__secret__btn" type="submit">Generate API Key</button>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% unless @user.api_secrets.empty? %>
|
||||
<div>
|
||||
<h3>Active API keys (never share these!)</h3>
|
||||
|
||||
<% @user.api_secrets.order(created_at: :desc).each do |api_secret| %>
|
||||
<details class="p-4 mt-2 crayons-card crayons-card--secondary">
|
||||
<summary class="title fw-medium"><%= api_secret.description %></summary>
|
||||
<div class="flex pt-2">
|
||||
<div class="flex-1 pl-4">
|
||||
<p class="ff-accent"><%= api_secret.secret %></p>
|
||||
<p class="fs-s">Created: <time datetime="<%= api_secret.created_at.rfc3339 %>"><%= api_secret.created_at.to_s %></time></p>
|
||||
</div>
|
||||
<%= form_tag users_api_secret_path(api_secret.id), class: "api__secret__revoke", method: :delete do %>
|
||||
<%= button_tag "Revoke", class: "crayons-btn crayons-btn--danger" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</details>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<button class="big-action cta" id="new__api__secret__btn" type="submit">
|
||||
Generate API Key
|
||||
</button>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<h3>Active API keys (never share these!)</h3>
|
||||
<% if @user.api_secrets.empty? %>
|
||||
<p>None yet!</p>
|
||||
<% end %>
|
||||
<div class="crayons-box crayons-box--danger p-6 grid gap-6">
|
||||
<h2 class="color-accent-danger">Danger Zone</h2>
|
||||
|
||||
<% @user.api_secrets.order(created_at: :desc).each do |api_secret| %>
|
||||
<div class="api__secret__container">
|
||||
<div class="api__secret__desc">
|
||||
<details>
|
||||
<summary class="title"><%= api_secret.description %></summary>
|
||||
<p class="content"><%= api_secret.secret %></p>
|
||||
<p class="subtitle">
|
||||
Created: <time datetime="<%= api_secret.created_at.rfc3339 %>"><%= api_secret.created_at.to_s %></time>
|
||||
</p>
|
||||
<%= form_tag users_api_secret_path(api_secret.id), class: "api__secret__revoke", method: :delete do %>
|
||||
<%= button_tag "Revoke", class: "big-action danger-button" %>
|
||||
<% end %>
|
||||
</details>
|
||||
<% if @user.identities.size == 2 %>
|
||||
<div class="grid gap-2">
|
||||
<h3>Remove OAuth Associations</h3>
|
||||
<p>You can remove one of your authentication methods. We'll still need one to authenticate you.</p>
|
||||
<p>Removing an OAuth association will:</p>
|
||||
<ul class="list-disc pl-6">
|
||||
<li>remove your ability to sign in with that account</li>
|
||||
<li>remove the associated URL from your profile</li>
|
||||
</ul>
|
||||
<p>
|
||||
Note that this does not revoke our OAuth app access; you will have to do so in your
|
||||
<a href="https://twitter.com/settings/applications">Twitter profile settings</a> or your
|
||||
<a href="https://github.com/settings/applications">GitHub profile settings</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<h2 style="color: #ff0000;">Danger Zone</h2>
|
||||
<% if @user.identities.size == 2 %>
|
||||
<h3>Remove OAuth Associations</h3>
|
||||
<h4 style="font-weight:400;">
|
||||
You can remove one of your authentication methods. We'll still need one to authenticate you.
|
||||
<br>
|
||||
<br>
|
||||
Removing an OAuth association will:
|
||||
<ul>
|
||||
<li>remove your ability to sign in with that account</li>
|
||||
<li>remove the associated URL from your profile</li>
|
||||
</ul>
|
||||
<strong>
|
||||
Note that this does not revoke our OAuth app access; you will have to do so in your
|
||||
<a href="https://twitter.com/settings/applications">Twitter profile settings</a> or your
|
||||
<a href="https://github.com/settings/applications">GitHub profile settings</a>.
|
||||
</strong>
|
||||
<br>
|
||||
<br>
|
||||
<%= form_tag "/users/remove_association", method: :delete, onsubmit: "return confirm('Are you absolutely sure you want to remove your Twitter account?');" do %>
|
||||
<%= hidden_field_tag :provider, "twitter" %>
|
||||
<button class="big-action danger-button small-button" type="submit">
|
||||
<img src="<%= asset_path("twitter-logo.svg") %>" alt="twitter logo"> REMOVE TWITTER
|
||||
<button class="crayons-btn crayons-btn--danger crayons-btn--icon-left" type="submit">
|
||||
<%= inline_svg_tag("twitter.svg", aria: true, class: "crayons-icon", title: "Twitter") %>
|
||||
Remove Twitter
|
||||
</button>
|
||||
<% end %>
|
||||
<br />
|
||||
|
||||
<%= form_tag "/users/remove_association", method: :delete, onsubmit: "return confirm('Are you absolutely sure you want to remove your GitHub account?');" do %>
|
||||
<%= hidden_field_tag :provider, "github" %>
|
||||
<button class="big-action danger-button small-button" type="submit">
|
||||
<img src="<%= asset_path("github-logo.svg") %>" alt="github logo"> REMOVE GITHUB
|
||||
<button class="crayons-btn crayons-btn--danger crayons-btn--icon-left" type="submit">
|
||||
<%= inline_svg_tag("github.svg", aria: true, class: "crayons-icon", title: "Twitter") %>
|
||||
Remove GitHub
|
||||
</button>
|
||||
<% end %>
|
||||
</h4>
|
||||
<% end %>
|
||||
|
||||
<h3>Delete Account</h3>
|
||||
<% if current_user.email? %>
|
||||
<h4 style="font-weight:400;">
|
||||
<%= form_tag user_request_destroy_path, method: :post, autocomplete: "off", id: "delete__account" do %>
|
||||
Deleting your account will:
|
||||
<ul class="delete__account">
|
||||
<li>delete your profile, along with your Twitter and/or GitHub associations.
|
||||
This does not include app permissions. You will have to remove them yourself on
|
||||
<a href="https://twitter.com/settings/applications">Twitter profile settings</a> and
|
||||
<a href="https://github.com/settings/applications">GitHub profile settings</a>.
|
||||
</li>
|
||||
<%# TODO: expand the delete messaging later %>
|
||||
<li>delete any and all content you have, such as articles, comments, your reading list or chat messages.</li>
|
||||
<li>allow your username to become available to anyone.</li>
|
||||
</ul>
|
||||
<button class="big-action danger-button small-button" id="delete__account__btn" type="submit">
|
||||
DELETE ACCOUNT
|
||||
</button>
|
||||
<% end %>
|
||||
<div class="grid gap-2">
|
||||
<h3>Delete Account</h3>
|
||||
<% if current_user.email? %>
|
||||
<%= form_tag user_request_destroy_path, method: :post, autocomplete: "off", id: "delete__account", class: "grid gap-2" do %>
|
||||
<p>Deleting your account will:</p>
|
||||
<ul class="list-disc pl-6">
|
||||
<li>delete your profile, along with your Twitter and/or GitHub associations.
|
||||
This does not include app permissions. You will have to remove them yourself on
|
||||
<a href="https://twitter.com/settings/applications">Twitter profile settings</a> and
|
||||
<a href="https://github.com/settings/applications">GitHub profile settings</a>.
|
||||
</li>
|
||||
<%# TODO: expand the delete messaging later %>
|
||||
<li>delete any and all content you have, such as articles, comments, your reading list or chat messages.</li>
|
||||
<li>allow your username to become available to anyone.</li>
|
||||
</ul>
|
||||
<div><button class="crayons-btn crayons-btn--danger" id="delete__account__btn" type="submit">Delete Account</button></div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<p>Please, <%= link_to "provide an email", "/settings/profile" %> to fully delete your account.</p>
|
||||
<% end %>
|
||||
</h4>
|
||||
<% else %>
|
||||
<p>Please, <%= link_to "provide an email", "/settings/profile" %> to fully delete your account.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if current_user.articles_count.positive? || current_user.comments_count.positive? %>
|
||||
<p>
|
||||
If you would like to keep your content under the <%= link_to "@ghost", "/ghost" %> account,
|
||||
please <a href="mailto:<%= SiteConfig.default_site_email %>?subject=Request Account Deletion&body=<%= @email_body %>">click here.</a>
|
||||
</p>
|
||||
<% end %>
|
||||
<div>
|
||||
<% if current_user.articles_count.positive? || current_user.comments_count.positive? %>
|
||||
<p>
|
||||
If you would like to keep your content under the <%= link_to "@ghost", "/ghost" %> account,
|
||||
please <a href="mailto:<%= SiteConfig.default_site_email %>?subject=Request Account Deletion&body=<%= @email_body %>">click here.</a>
|
||||
</p>
|
||||
<% end %>
|
||||
|
||||
<p>
|
||||
Feel free to contact <a href="mailto:<%= SiteConfig.default_site_email %>"><%= SiteConfig.default_site_email %></a> with any questions.
|
||||
</p>
|
||||
<p>Feel free to contact <a href="mailto:<%= SiteConfig.default_site_email %>"><%= SiteConfig.default_site_email %></a> with any questions.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<% if SiteConfig.auth_allowed?("github") && !@user.identities.exists?(provider: "github") %>
|
||||
<div class="field">
|
||||
<a href="/users/auth/github" class="big-button cta" data-no-instant>
|
||||
<img src="<%= asset_path("github-logo.svg") %>" alt="github logo"> CONNECT GITHUB ACCOUNT
|
||||
</a>
|
||||
<% if (SiteConfig.auth_allowed?("github") || SiteConfig.auth_allowed?("twitter")) && (!@user.identities.exists?(provider: "github") || !@user.identities.exists?(provider: "twitter")) %>
|
||||
<div class="crayons-card mb-6 p-6">
|
||||
<div class="flex">
|
||||
<% if SiteConfig.auth_allowed?("github") && !@user.identities.exists?(provider: "github") %>
|
||||
<a href="/users/auth/github" class="crayons-btn crayons-btn--outlined mr-2" data-no-instant>
|
||||
<%= inline_svg_tag("github.svg", aria: true, class: "crayons-icon", title: "GitHub") %>Connect GitHub Account
|
||||
</a>
|
||||
<% end %>
|
||||
<% if SiteConfig.auth_allowed?("twitter") && !@user.identities.exists?(provider: "twitter") %>
|
||||
<a href="/users/auth/twitter?callback_url=<%= app_url("/users/auth/twitter/callback") %>" class="crayons-btn crayons-btn--outlined" data-no-instant>
|
||||
<%= inline_svg_tag("twitter.svg", aria: true, class: "crayons-icon", title: "GitHub") %>Connect Twitter Account
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<% end %>
|
||||
|
||||
<% if SiteConfig.auth_allowed?("twitter") && !@user.identities.exists?(provider: "twitter") %>
|
||||
<div class="field">
|
||||
<a href="/users/auth/twitter?callback_url=<%= app_url("/users/auth/twitter/callback") %>" class="big-button cta" data-no-instant>
|
||||
<img src="<%= asset_path("twitter-logo.svg") %> " alt="twitter logo"> CONNECT TWITTER ACCOUNT
|
||||
</a>
|
||||
</div>
|
||||
<hr />
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,87 @@
|
|||
<h3>Billing Details</h3>
|
||||
<% if current_user.stripe_id_code.blank? %>
|
||||
<%= form_tag "/stripe_active_cards", id: "credit-card-form", method: :post do %>
|
||||
<article>
|
||||
<% if flash[:error].present? %>
|
||||
<div id="error_explanation">
|
||||
<p><%= flash[:error] %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
</article>
|
||||
<div class="stripe-button-wrapper" id="stripe-button-wrapper">
|
||||
<button id="custom-stripe-button" class="credit-card-button">+ Add Credit Card</button>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="billing-history-header">Your Credit Cards</div>
|
||||
<% @customer.sources.each do |source| %>
|
||||
<div class="billing-item">
|
||||
<div><%= source.brand %> ending in <%= source.last4 %></div>
|
||||
<span class="billing-item-detail">Expires <%= source.exp_month %> / <%= source.exp_year %> </span>
|
||||
<% if source.id == @customer.default_source %>
|
||||
<span class="billing-item-detail billing-item-green">primary</span>
|
||||
<%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
|
||||
<button class="billing-item-detail billing-item-red">remove card</button>
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<h3>Billing Details</h3>
|
||||
<% if current_user.stripe_id_code.blank? %>
|
||||
<%= form_tag "/stripe_active_cards", id: "credit-card-form", method: :post do %>
|
||||
<article>
|
||||
<% if flash[:error].present? %>
|
||||
<div id="error_explanation">
|
||||
<p><%= flash[:error] %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= form_tag "/stripe_active_cards/#{source.id}", method: :patch do %>
|
||||
<button class="billing-item-detail">make primary</button>
|
||||
</article>
|
||||
<div class="stripe-button-wrapper" id="stripe-button-wrapper">
|
||||
<button id="custom-stripe-button" class="crayons-btn" type="button">Add Credit Card</button>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="billing-history-header">Your Credit Cards</div>
|
||||
<% @customer.sources.each do |source| %>
|
||||
<div class="billing-item">
|
||||
<div><%= source.brand %> ending in <%= source.last4 %></div>
|
||||
<span class="billing-item-detail">Expires <%= source.exp_month %> / <%= source.exp_year %> </span>
|
||||
<% if source.id == @customer.default_source %>
|
||||
<span class="billing-item-detail billing-item-green">primary</span>
|
||||
<%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
|
||||
<button class="billing-item-detail billing-item-red">remove card</button>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= form_tag "/stripe_active_cards/#{source.id}", method: :patch do %>
|
||||
<button class="billing-item-detail">make primary</button>
|
||||
<% end %>
|
||||
<%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
|
||||
<button class="billing-item-detail billing-item-red">remove card</button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
|
||||
<button class="billing-item-detail billing-item-red">remove card</button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= form_tag "/stripe_active_cards", id: "credit-card-form", method: :post do %>
|
||||
<br />
|
||||
<div class="stripe-button-wrapper">
|
||||
<button id="add-credit-card-button" class="credit-card-button">+ Add Another Credit Card</button>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= form_tag "/stripe_active_cards", id: "credit-card-form", method: :post do %>
|
||||
<br />
|
||||
<div class="stripe-button-wrapper">
|
||||
<button id="add-credit-card-button" class="credit-card-button">+ Add Another Credit Card</button>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<script src="https://checkout.stripe.com/checkout.js"></script>
|
||||
<script src="https://checkout.stripe.com/checkout.js"></script>
|
||||
|
||||
<script>
|
||||
setTimeout(function () {
|
||||
var handler = StripeCheckout.configure({
|
||||
key: '<%= Rails.configuration.stripe[:publishable_key] %>',
|
||||
image: "https://thepracticaldev.s3.amazonaws.com/i/xoxvppfjorrnxudkzskw.jpg",
|
||||
locale: 'auto',
|
||||
token: function (token) {
|
||||
var form = document.getElementById("credit-card-form")
|
||||
addHidden(form, 'stripe_token', token.id);
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('add-credit-card-button').addEventListener('click', function (e) {
|
||||
// Open Checkout with further options:
|
||||
handler.open({
|
||||
description: 'Add Credit Card',
|
||||
amount: 0,
|
||||
email: "<%= current_user.email %>",
|
||||
panelLabel: "Add Card",
|
||||
allowRememberMe: false,
|
||||
zipCode: true,
|
||||
<script>
|
||||
setTimeout(function () {
|
||||
var handler = StripeCheckout.configure({
|
||||
key: '<%= Rails.configuration.stripe[:publishable_key] %>',
|
||||
image: "https://thepracticaldev.s3.amazonaws.com/i/xoxvppfjorrnxudkzskw.jpg",
|
||||
locale: 'auto',
|
||||
token: function (token) {
|
||||
var form = document.getElementById("credit-card-form")
|
||||
addHidden(form, 'stripe_token', token.id);
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// Close Checkout on page navigation:
|
||||
window.addEventListener('popstate', function () {
|
||||
handler.close();
|
||||
});
|
||||
}, 220)
|
||||
document.getElementById('add-credit-card-button').addEventListener('click', function (e) {
|
||||
// Open Checkout with further options:
|
||||
handler.open({
|
||||
description: 'Add Credit Card',
|
||||
amount: 0,
|
||||
email: "<%= current_user.email %>",
|
||||
panelLabel: "Add Card",
|
||||
allowRememberMe: false,
|
||||
zipCode: true,
|
||||
});
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
function addHidden(theForm, key, value) {
|
||||
// Create a hidden input element, and append it to the form:
|
||||
var input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = key; // 'the key/name of the attribute/field that is sent to the server
|
||||
input.value = value;
|
||||
theForm.appendChild(input);
|
||||
}
|
||||
</script>
|
||||
// Close Checkout on page navigation:
|
||||
window.addEventListener('popstate', function () {
|
||||
handler.close();
|
||||
});
|
||||
}, 220)
|
||||
|
||||
function addHidden(theForm, key, value) {
|
||||
// Create a hidden input element, and append it to the form:
|
||||
var input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = key; // 'the key/name of the attribute/field that is sent to the server
|
||||
input.value = value;
|
||||
theForm.appendChild(input);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<label class="rich-selector editor-selector editor-selector--<%= version %>">
|
||||
<%= f.radio_button :editor_version, version, checked: @user.editor_version == version, class: "rich-selector__radio" %>
|
||||
<div class="rich-selector__indicator"></div>
|
||||
<div class="rich-selector__outline"></div>
|
||||
<% if version == "v1"%>
|
||||
basic markdown
|
||||
<% else %>
|
||||
rich + markdown
|
||||
<% end %>
|
||||
<label class="rich-selector crayons-field crayons-field--radio editor-selector--<%= version %>">
|
||||
<%= f.radio_button :editor_version, version, checked: @user.editor_version == version, class: "crayons-radio" %>
|
||||
<div class="crayons-field__label">
|
||||
<% if version == "v1" %>
|
||||
Basic markdown
|
||||
<% else %>
|
||||
Rich + markdown
|
||||
<% end %>
|
||||
</div>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<label class="rich-selector exp-selector exp-selector--<%= exp %>">
|
||||
<%= f.radio_button :experience_level, exp, checked: @user.experience_level == exp.to_i, class: "rich-selector__radio" %>
|
||||
<div class="rich-selector__indicator exp-selector__indicator"></div>
|
||||
<div class="rich-selector__outline exp-selector__outline"></div>
|
||||
<%= i + 1 %>
|
||||
<label>
|
||||
<%= f.radio_button :experience_level, exp, checked: @user.experience_level == exp.to_i, class: "rich-selector-radio" %>
|
||||
<div class="rich-selector rich-selector--experience align-center my-2 mx-3 fw-medium fs-l"><%= i + 1 %></div>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<label class="rich-selector font-selector font-selector--<%= font.tr(" ", "-") %>">
|
||||
<%= f.radio_button :config_font, font, checked: @user.config_font.tr("_", " ") == font, class: "rich-selector__radio" %>
|
||||
<div class="rich-selector__indicator"></div>
|
||||
<div class="rich-selector__outline"></div>
|
||||
<% if font == "default"%>
|
||||
serif
|
||||
<% else %>
|
||||
<%= font %>
|
||||
<% end %>
|
||||
<label class="rich-selector crayons-field crayons-field--radio font-selector--<%= font.tr(" ", "-") %>">
|
||||
<%= f.radio_button :config_font, font, checked: @user.config_font.tr("_", " ") == font, class: "crayons-radio" %>
|
||||
<div class="crayons-field__label fw-normal">
|
||||
<% if font == "default" %>
|
||||
serif
|
||||
<% else %>
|
||||
<%= font %>
|
||||
<% end %>
|
||||
</div>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,43 @@
|
|||
<h3>Pin a few of your GitHub repos to your profile</h3>
|
||||
<% if @client %>
|
||||
<div id="github-repos-container">
|
||||
<div class="github-repos loading-repos">
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<h3>Pin a few of your GitHub repos to your profile</h3>
|
||||
<% if @client %>
|
||||
<div id="github-repos-container">
|
||||
<div class="github-repos loading-repos">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%= javascript_packs_with_chunks_tag "githubRepos", defer: true %>
|
||||
<% end %>
|
||||
|
||||
<hr />
|
||||
<h3>Generate a personal blog from your <%= community_name %> posts</h3>
|
||||
<div class="single-app-integration">
|
||||
<% if current_user.decorate.stackbit_integration? %>
|
||||
<h2>Connected to Stackbit <sup>beta</sup><img src="<%= asset_path("checkmark-green.svg") %>" /></h2>
|
||||
<p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/dashboard">Go To Your Stackbit Dashboard</a></strong></p>
|
||||
<p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/create?ref=devto">Create New Stackbit Site</a></strong></p>
|
||||
|
||||
<% else %>
|
||||
<h2>Connect to Stackbit <sup>beta</sup></h2>
|
||||
<p>Automatically generate a self-hosted static blog feed from your <%= community_name %> posts.</p>
|
||||
<p style="font-size: 1.1em"><strong><a href="/connecting-with-stackbit">Get Started</a></strong></p>
|
||||
<%= javascript_packs_with_chunks_tag "githubRepos", defer: true %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<h3>Generate a personal blog from your <%= community_name %> posts</h3>
|
||||
<div class="single-app-integration">
|
||||
<% if current_user.decorate.stackbit_integration? %>
|
||||
<h3>Connected to Stackbit <sup>beta</sup><img src="<%= asset_path("checkmark-green.svg") %>" /></h3>
|
||||
<p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/dashboard">Go To Your Stackbit Dashboard</a></strong></p>
|
||||
<p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/create?ref=devto">Create New Stackbit Site</a></strong></p>
|
||||
<% else %>
|
||||
<h3>Connect to Stackbit <span class="crayons-indicator crayons-indicator--accent">beta</span></h3>
|
||||
<p>Automatically generate a self-hosted static blog feed from your <%= community_name %> posts.</p>
|
||||
<p style="font-size: 1.1em"><strong><a href="/connecting-with-stackbit">Get Started</a></strong></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if false # removed since isn't fully working right now %>
|
||||
<hr />
|
||||
<%= form_tag users_update_twitch_username_path, class: "crayons-card grid gap-6 p-6 mb-6" do |f| %>
|
||||
<header class="grid gap-2">
|
||||
<h3>Live Streaming <span class="crayons-indicator crayons-indicator--accent">beta</span></h3>
|
||||
<p>Add your Twitch username, and then checkout <a href="/live/<%= @user.username %>">dev.to/live/<%= @user.username %></a>.</p>
|
||||
</header>
|
||||
|
||||
<%= form_tag users_update_twitch_username_path do |f| %>
|
||||
<h3>Live Streaming (Experimental)</h3>
|
||||
<div class="field">
|
||||
<%= label_tag "user[twitch_username]", "Twitch Username" %>
|
||||
<%= text_field_tag "user[twitch_username]", @user.twitch_username %>
|
||||
<div class="crayons-notice crayons-notice--warning">It's a new thing we're trying out. Soon we'll be able to indicate when any community member is currently streaming.</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= label_tag "user[twitch_username]", "Twitch Username", class: "crayons-field__label" %>
|
||||
<%= text_field_tag "user[twitch_username]", @user.twitch_username, class: "crayons-textfield" %>
|
||||
</div>
|
||||
<p><em>Add your Twitch username, and then checkout <a href="/live/<%= @user.username %>">dev.to/live/<%= @user.username %></a>.</em></p>
|
||||
<p><em>It's a new thing we're trying out. Soon we'll be able to indicate when any community member is currently streaming.</em></p>
|
||||
|
||||
<%= submit_tag "SUBMIT", class: "cta" %>
|
||||
<div><button class="crayons-btn" type="submit">Submit</button></div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,22 @@
|
|||
<h2>Languages</h2>
|
||||
<h3>Select which languages you'd prefer to see in your feed <span style="color:#8c3434">(beta)</span></h3>
|
||||
<h4 style="font-weight:400">
|
||||
This setting controls which languages you are more likely to see throughout the site, but you may still see other languages, especially English.
|
||||
</h4>
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<header>
|
||||
<h3 class="mb-2">Languages <span class="crayons-indicator crayons-indicator--accent">beta</span></h3>
|
||||
<p>Select which languages you'd prefer to see in your feed.</p>
|
||||
<p>This setting controls which languages you are more likely to see throughout the site, but you may still see other languages, especially English.</p>
|
||||
</header>
|
||||
|
||||
<%= form_tag users_update_language_settings_path do |f| %>
|
||||
<div class="checkbox-field">
|
||||
<div class="crayons-notice crayons-notice--warning">
|
||||
<p>This feature is in beta and will improve over time. Another way to tailor your feed is to discover and follow members who write in your preferred language.</p>
|
||||
</div>
|
||||
|
||||
<%= form_tag users_update_language_settings_path, class: "grid gap-4" do |f| %>
|
||||
<% Languages::LIST.each do |code, name| %>
|
||||
<div class="sub-field">
|
||||
<label>
|
||||
<%= check_box_tag "user[preferred_languages][]", code, @user.preferred_languages_array.include?(code) %>
|
||||
<%= name %>
|
||||
</label>
|
||||
</div>
|
||||
<label class="crayons-field crayons-field--checkbox">
|
||||
<%= check_box_tag "user[preferred_languages][]", code, @user.preferred_languages_array.include?(code), class: "crayons-checkbox" %>
|
||||
<div class="crayons-field__label"><%= name %></div>
|
||||
</label>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<%= hidden_field_tag :tab, value: @tab %>
|
||||
<%= submit_tag "SUBMIT", class: "cta" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<h3>
|
||||
This feature is in beta and will improve over time. Another way to tailor your feed is to discover and follow members who write in your preferred language.
|
||||
</h3>
|
||||
<div class="mt-6"><button type="submit" class="crayons-btn">Save Language Settings</button></div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,68 @@
|
|||
<h3>👋 Style customizations have moved to <a href="/settings/ux">UX</a>
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<h3>Connect</h3>
|
||||
<%= form_for(@user, html: { id: nil, class: "grid gap-6" }) do |f| %>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :inbox_type, "Inbox type", class: "crayons-field__label" %>
|
||||
<p class="crayons-field__description">Open your inbox to messages from people you don't follow or keep your inbox private to mutual follows.</p>
|
||||
<%= f.select :inbox_type, [%w[Open open], %w[Private private]], class: "crayons-select" %>
|
||||
</div>
|
||||
|
||||
<h2> Connect </h2>
|
||||
<h3> Inbox Type </h3>
|
||||
<%= form_for(@user, html: { id: nil }) do |f| %>
|
||||
<div class="field checkbox-label-first">
|
||||
<%= f.label :inbox_type, "Open your inbox to messages from people you don't follow or keep your inbox private to mutual follows." %>
|
||||
<div class="sub-field">
|
||||
<%= f.select :inbox_type, [%w[Open open], %w[Private private]] %>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :inbox_guidelines, "Open inbox guidelines/instructions", class: "crayons-field__label" %>
|
||||
<%= f.text_area :inbox_guidelines, maxlength: 200, class: "crayons-textfield", rows: 5, placeholder: "For example:
|
||||
- Only contact me about consulting opportunities.
|
||||
- I'm happy to help beginners with CSS.
|
||||
- Allow for a few days to respond.
|
||||
- etc.
|
||||
" %>
|
||||
<p class="crayons-field__description">(optional)</p>
|
||||
</div>
|
||||
<%= f.label :inbox_guidelines, "Open inbox guidelines/instructions (optional)" %>
|
||||
<div class="sub-field">
|
||||
<%= f.text_area :inbox_guidelines, maxlength: 200, placeholder: "For example:
|
||||
- Only contact me about consulting opportunities.
|
||||
- I'm happy to help beginners with CSS.
|
||||
- Allow for a few days to respond.
|
||||
- etc.
|
||||
" %>
|
||||
</div>
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div><button type="submit" class="crayons-btn">Save Connect Settings</button></div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= render "language_settings" %>
|
||||
|
||||
<h2>Sponsors</h2>
|
||||
<h4 style="font-weight:400">
|
||||
You have the option to remove sponsor messaging (where it is practical to do so). Our wonderful sponsors help sustain the platform and improve your experience, and we strive to make their presence constructive to the community, but feel free to use this setting if you wish.
|
||||
</h4>
|
||||
<%= form_for(@user, html: { id: nil }) do |f| %>
|
||||
<div class="checkbox-field">
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :display_sponsors %>
|
||||
<%= f.label :display_sponsors, "Display Sponsors (When browsing)" %>
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<header>
|
||||
<h3 class="mb-2">Sponsors</h3>
|
||||
<p>You have the option to remove sponsor messaging (where it is practical to do so). Our wonderful sponsors help sustain the platform and improve your experience, and we strive to make their presence constructive to the community, but feel free to use this setting if you wish.</p>
|
||||
</header>
|
||||
|
||||
<%= form_for(@user, html: { id: nil, class: "grid gap-4" }) do |f| %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :display_sponsors, class: "crayons-checkbox" %>
|
||||
<%= f.label :display_sponsors, "Display Sponsors (When browsing)", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :permit_adjacent_sponsors %>
|
||||
<%= f.label :permit_adjacent_sponsors, "Permit Nearby Sponsors (When publishing)" %>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :permit_adjacent_sponsors, class: "crayons-checkbox" %>
|
||||
<%= f.label :permit_adjacent_sponsors, "Permit Nearby Sponsors (When publishing)", class: "crayons-field__label" %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
|
||||
<%= f.hidden_field :tab, value: @tab, id: nil %>
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<h2>Export content</h2>
|
||||
<% if @user.export_requested? %>
|
||||
<h4 style="font-weight:400">
|
||||
You have recently requested an export of your content.
|
||||
Please check your email.
|
||||
</h4>
|
||||
<% else %>
|
||||
<h4 style="font-weight:400">
|
||||
You can request an export of all your content.
|
||||
Currently we only support the export of your posts and comments.
|
||||
They will be emailed to your inbox.
|
||||
</h4>
|
||||
|
||||
<%= form_for(@user, html: { id: nil }) do |f| %>
|
||||
<div class="checkbox-field">
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :export_requested %>
|
||||
<%= f.label :export_requested, "Request an export of your content" %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<%= f.hidden_field :tab, value: @tab, id: nil %>
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
</div>
|
||||
<div><button type="submit" class="crayons-btn">Save Sponsors Settings</button></div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-card grid gap-4 p-6 mb-6">
|
||||
<h3>Export content</h3>
|
||||
|
||||
<% if @user.export_requested? %>
|
||||
<div class="crayons-notice crayons-notice--warning">
|
||||
<p>You have recently requested an export of your content. Please check your email.</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="-mt-2">You can request an export of all your content. Currently we only support the export of your posts and comments. They will be emailed to your inbox.</p>
|
||||
|
||||
<%= form_for(@user, html: { id: nil }) do |f| %>
|
||||
<div class="crayons-field crayons-field--checkbox mb-6">
|
||||
<%= f.check_box :export_requested, class: "crayons-checkbox" %>
|
||||
<%= f.label :export_requested, "Request an export of your content", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<%= f.hidden_field :tab, value: @tab, id: nil %>
|
||||
<div><button type="submit" class="crayons-btn">Submit data request</button></div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<label class="rich-selector navbar-selector navbar-selector--<%= navbar.tr(" ", "-") %>">
|
||||
<%= f.radio_button :config_navbar, navbar, checked: @user.config_navbar.tr("_", " ") == navbar, class: "rich-selector__radio" %>
|
||||
<div class="rich-selector__indicator"></div>
|
||||
<div class="rich-selector__outline"></div>
|
||||
<% if navbar == "default"%>
|
||||
fixed to window
|
||||
<% else %>
|
||||
static top of page
|
||||
<% end %>
|
||||
<label class="rich-selector crayons-field crayons-field--radio navbar-selector--<%= navbar.tr(" ", "-") %>">
|
||||
<%= f.radio_button :config_navbar, navbar, checked: @user.config_navbar.tr("_", " ") == navbar, class: "crayons-radio" %>
|
||||
<div class="crayons-field__label">
|
||||
<% if navbar == "default" %>
|
||||
Fixed to window
|
||||
<% else %>
|
||||
Static top of page
|
||||
<% end %>
|
||||
</div>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,89 +1,92 @@
|
|||
<h3>Email Notification Settings</h3>
|
||||
<%= form_for(@user) do |f| %>
|
||||
<div class="checkbox-field">
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_newsletter %>
|
||||
<%= f.label :email_newsletter, "Send me weekly newsletter emails" %>
|
||||
<%= form_for @user do |f| %>
|
||||
<div class="crayons-card mb-6 grid gap-4 p-6">
|
||||
<header>
|
||||
<h3>Email Notification Settings</h3>
|
||||
</header>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_newsletter, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_newsletter, "Send me weekly newsletter emails", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_digest_periodic %>
|
||||
<%= f.label :email_digest_periodic, "Send me a periodic digest of top posts from my tags" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_digest_periodic, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_digest_periodic, "Send me a periodic digest of top posts from my tags", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<% if current_user.a_sustaining_member? %>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_membership_newsletter %>
|
||||
<%= f.label :email_membership_newsletter, "Send me sustaining membership newsletter emails" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_membership_newsletter, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_membership_newsletter, "Send me sustaining membership newsletter emails", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if current_user.tag_moderator? %>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_tag_mod_newsletter %>
|
||||
<%= f.label :email_tag_mod_newsletter, "Send me tag moderator newsletter emails" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_tag_mod_newsletter, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_tag_mod_newsletter, "Send me tag moderator newsletter emails", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if current_user.has_role?(:trusted) %>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_community_mod_newsletter %>
|
||||
<%= f.label :email_community_mod_newsletter, "Send me community moderator newsletter emails" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_community_mod_newsletter, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_community_mod_newsletter, "Send me community moderator newsletter emails", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_comment_notifications %>
|
||||
<%= f.label :email_comment_notifications, "Send me an email when someone replies to me in a comment thread" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_comment_notifications, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_comment_notifications, "Send me an email when someone replies to me in a comment thread", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_follower_notifications %>
|
||||
<%= f.label :email_follower_notifications, "Send me an email when someone new follows me" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_follower_notifications, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_follower_notifications, "Send me an email when someone new follows me", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_mention_notifications %>
|
||||
<%= f.label :email_mention_notifications, "Send me an email when someone mentions me" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_mention_notifications, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_mention_notifications, "Send me an email when someone mentions me", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_badge_notifications %>
|
||||
<%= f.label :email_badge_notifications, "Send me an email when I receive a badge" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_badge_notifications, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_badge_notifications, "Send me an email when I receive a badge", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_connect_messages %>
|
||||
<%= f.label :email_connect_messages, "Send me an email when I receive a direct message (while inactive)" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_connect_messages, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_connect_messages, "Send me an email when I receive a direct message (while inactive)", class: "crayons-field__label" %>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :email_unread_notifications %>
|
||||
<%= f.label :email_unread_notifications, "Send me occasional reminders that I have unread notifications on #{community_name}" %>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_unread_notifications, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_unread_notifications, "Send me occasional reminders that I have unread notifications on #{community_name}", class: "crayons-field__label" %>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Mobile Notification Settings (Beta)</h3>
|
||||
<p>
|
||||
<em>iOS only for now. Additional settings and platforms will be rolled out as new notification features are made available.</em>
|
||||
</p>
|
||||
<div class="checkbox-field">
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :mobile_comment_notifications %>
|
||||
<%= f.label :mobile_comment_notifications, "Notify me when someone replies to me in a comment thread" %>
|
||||
|
||||
<div class="crayons-card mb-6 grid gap-6 p-6">
|
||||
<header>
|
||||
<h3 class="mb-2">Mobile Notification Settings (Beta)</h3>
|
||||
<p>iOS only for now. Additional settings and platforms will be rolled out as new notification features are made available.</p>
|
||||
</header>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :mobile_comment_notifications, class: "crayons-checkbox" %>
|
||||
<%= f.label :mobile_comment_notifications, "Notify me when someone replies to me in a comment thread", class: "crayons-field__label" %>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Platform Notification Settings</h3>
|
||||
<p>
|
||||
<em>Notifications that only appear on the <a href="<%= notifications_path %>">notifications page</a>.</em>
|
||||
</p>
|
||||
<div class="checkbox-field">
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :welcome_notifications %>
|
||||
<%= f.label :welcome_notifications, "Send me occasional tips on how to enhance my #{community_name} experience" %>
|
||||
|
||||
<div class="crayons-card mb-6 grid gap-6 p-6">
|
||||
<header>
|
||||
<h3 class="mb-2">Platform Notification Settings</h3>
|
||||
<p>Notifications that only appear on the <a href="<%= notifications_path %>">notifications page</a>.</p>
|
||||
</header>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :welcome_notifications, class: "crayons-checkbox" %>
|
||||
<%= f.label :welcome_notifications, "Send me occasional tips on how to enhance my #{community_name} experience", class: "crayons-field__label" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if current_user.trusted %>
|
||||
<h3>Mod Notification Settings</h3>
|
||||
<div class="checkbox-field">
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :mod_roundrobin_notifications %>
|
||||
<%= f.label :mod_roundrobin_notifications, "Send me occasional community-success mod notifications" %>
|
||||
<div class="crayons-card mb-6 grid gap-6 p-6">
|
||||
<h3>Mod Notification Settings</h3>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :mod_roundrobin_notifications, class: "crayons-checkbox" %>
|
||||
<%= f.label :mod_roundrobin_notifications, "Send me occasional community-success mod notifications", class: "crayons-field__label" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<%= f.hidden_field :tab, value: @tab %>
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
</div>
|
||||
|
||||
<%= f.hidden_field :tab, value: @tab %>
|
||||
<button type="submit" class="crayons-btn">Save</button>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,187 +1,200 @@
|
|||
<%= javascript_packs_with_chunks_tag "colorPreview", "clipboardCopy", defer: true %>
|
||||
|
||||
<%= render "shared/webcomponents_loader_script" %>
|
||||
|
||||
<style>
|
||||
.primary-sticky-nav-author, .primary-sticky-nav-author-element {
|
||||
border: 1px solid <%= HexComparer.new([user_colors(@organization)[:bg], user_colors(@organization)[:text]]).brightness(0.88) %> !important;
|
||||
box-shadow: 3px 4px 0px <%= HexComparer.new([user_colors(@organization)[:bg], user_colors(@organization)[:text]]).brightness(0.88) %> !important;
|
||||
}
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<h2>Organization Members</h2>
|
||||
|
||||
.primary-sticky-nav-author button {
|
||||
background-color: <%= user_colors(@organization)[:bg] %> !important;
|
||||
color: <%= user_colors(@organization)[:text] %> !important;
|
||||
<% if user_colors(@organization)[:bg].downcase == "#ffffff" %>
|
||||
border: 1px solid <%= user_colors(@organization)[:text] %> !important;
|
||||
<% end %>
|
||||
}
|
||||
</style>
|
||||
<div class="settings-org-members">
|
||||
<h3>Organization Members</h3>
|
||||
<% @org_organization_memberships.each do |org_membership| %>
|
||||
<div class="settings-org-member-row <%= "settings-org-admin-row" if org_membership.type_of_user == "admin" %>">
|
||||
<a href="<%= org_membership.user.path %>"><%= org_membership.user.name %></a>
|
||||
<div class="settings-org-member-actions">
|
||||
<% if org_membership.user == @user && org_membership.type_of_user == "admin" %>
|
||||
<button class="settings-org-member settings-org-member-admin-self">you (admin)</button>
|
||||
<% elsif org_membership.user != @user && org_membership.type_of_user == "admin" %>
|
||||
<button class="settings-org-member settings-org-member-admin-other">admin</button>
|
||||
<%= form_tag "/users/remove_org_admin", onsubmit: "return confirm('Are you sure you want to take away admin status from #{org_membership.user.name}?');" do %>
|
||||
<%= hidden_field_tag "user_id", org_membership.user_id %>
|
||||
<%= hidden_field_tag "organization_id", @organization.id %>
|
||||
<button class="settings-org-member settings-org-member-remove" title="Revoke admin status" type="submit">revoke admin status</button>
|
||||
<div class="grid gap-2">
|
||||
<% @org_organization_memberships.each do |org_membership| %>
|
||||
<div class="crayons-card crayons-card--secondary p-4 flex items-center">
|
||||
<p class="fw-medium flex-1">
|
||||
<a href="<%= org_membership.user.path %>"><%= org_membership.user.name %></a>
|
||||
<% if org_membership.user == @user %>
|
||||
<span class="crayons-indicator">You</span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<button class="settings-org-member settings-org-member-admin-self">org member</button>
|
||||
<%= form_tag "/users/add_org_admin", onsubmit: "return confirm('Are you sure you want to give #{org_membership.user.name} admin status?');" do %>
|
||||
<%= hidden_field_tag "user_id", org_membership.user_id %>
|
||||
<%= hidden_field_tag "organization_id", @organization.id %>
|
||||
<button class="settings-org-member settings-org-member-make-admin" title="Make admin" type="submit">make admin</button>
|
||||
|
||||
<% if org_membership.type_of_user == "admin" %>
|
||||
<span class="crayons-indicator crayons-indicator--critical">Admin</span>
|
||||
<% end %>
|
||||
<%= form_tag "/users/remove_from_org", onsubmit: "return confirm('Are you sure you want remove #{org_membership.user.name} from the organization?');" do %>
|
||||
<%= hidden_field_tag "user_id", org_membership.user_id %>
|
||||
<%= hidden_field_tag "organization_id", @organization.id %>
|
||||
<button class="settings-org-member settings-org-member-remove" title="Remove from org" type="submit">remove from org</button>
|
||||
</p>
|
||||
|
||||
<div class="flex">
|
||||
<% if org_membership.user == @user && org_membership.type_of_user == "admin" %>
|
||||
<!-- TODO: ? -->
|
||||
<% elsif org_membership.user != @user && org_membership.type_of_user == "admin" %>
|
||||
<%= form_tag "/users/remove_org_admin", onsubmit: "return confirm('Are you sure you want to take away admin status from #{org_membership.user.name}?');" do %>
|
||||
<%= hidden_field_tag "user_id", org_membership.user_id %>
|
||||
<%= hidden_field_tag "organization_id", @organization.id %>
|
||||
<button class="crayons-btn crayons-btn--secondary ml-2" title="Revoke admin status" type="submit">Revoke admin status</button>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= form_tag "/users/add_org_admin", onsubmit: "return confirm('Are you sure you want to give #{org_membership.user.name} admin status?');" do %>
|
||||
<%= hidden_field_tag "user_id", org_membership.user_id %>
|
||||
<%= hidden_field_tag "organization_id", @organization.id %>
|
||||
<button class="crayons-btn crayons-btn--secondary ml-2" title="Make admin" type="submit">Make admin</button>
|
||||
<% end %>
|
||||
<%= form_tag "/users/remove_from_org", onsubmit: "return confirm('Are you sure you want remove #{org_membership.user.name} from the organization?');" do %>
|
||||
<%= hidden_field_tag "user_id", org_membership.user_id %>
|
||||
<%= hidden_field_tag "organization_id", @organization.id %>
|
||||
<button class="crayons-btn crayons-btn--secondary ml-2" title="Remove from org" type="submit">Remove from org</button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<h3 class="mb-2">Grow the team</h3>
|
||||
<p>Invite teammates by sending them the secret and the following instructions:</p>
|
||||
</header>
|
||||
|
||||
<div class="crayons-card crayons-card--secondary p-4">
|
||||
<ol class="list-decimal pl-6 mb-2">
|
||||
<li>Sign up at
|
||||
<a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>">https://<%= ApplicationConfig["APP_DOMAIN"] %></a></li>
|
||||
<li>Navigate to
|
||||
<a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>/settings/organization">https://<%= ApplicationConfig["APP_DOMAIN"] %>/settings/organization</a>
|
||||
</li>
|
||||
<li>Paste the secret code below and click <b>Join Organization</b></li>
|
||||
</ol>
|
||||
<p>
|
||||
Your secret code is:
|
||||
<clipboard-copy for="settings-org-secret" onclick="nextElementSibling.hidden = false">
|
||||
<input type="text" class="ff-accent ff-s fw-medium" id="settings-org-secret" value="<%= @organization.secret %>" readonly aria-label="Organization secret (to be rotated regularly)">
|
||||
<%= inline_svg_tag("copy.svg", aria: true, class: "crayons-icon", title: "Copy to clipboard") %>
|
||||
</clipboard-copy>
|
||||
<span class="copy-text-announcer" id="copy-text-announcer" role="alert" hidden>Copied to clipboard!</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<%= form_tag "/organizations/generate_new_secret", onsubmit: "return confirm('Are you sure you want to generate a new secret? All outstanding secrets will be invalid.');" do %>
|
||||
<%= hidden_field_tag "organization[id]", @organization.id %>
|
||||
<button type="submit" class="crayons-btn crayons-btn--secondary">Generate new secret</button>
|
||||
<% end %>
|
||||
<p class="fw-medium color-accent-danger ml-3">You should rotate this regularly!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<h2>Organization details</h2>
|
||||
|
||||
<%= form_for @organization, html: { class: "grid gap-6" } do |f| %>
|
||||
<%= f.hidden_field :id %>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :name, class: "crayons-field__label" %>
|
||||
<%= f.text_field :name, maxlength: 50, class: "crayons-textfield", placeholder: "Acme Inc." %>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :slug, "Username", class: "crayons-field__label" %>
|
||||
<%= f.text_field :slug, maxlength: 18, minlength: 2, class: "crayons-textfield", placeholder: "acmeinc" %>
|
||||
<p class="crayons-field__description">Your organization's URL is: <%= app_url(@organization.slug) %></p>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :profile_image, "Profile image *", class: "crayons-field__label" %>
|
||||
<div class="flex items-center">
|
||||
<span class="crayons-logo crayons-logo--xl mr-2">
|
||||
<% if @organization.profile_image_url.present? %>
|
||||
<img alt="<%= @organization.name %> profile image" src="<%= cloudinary(@organization.profile_image_url, 50) %>" class="crayons-logo__image" />
|
||||
<% end %>
|
||||
</span>
|
||||
<%= f.file_field :profile_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<h3>Grow the team</h3>
|
||||
<h5>Invite teammates by sending them the secret and the following instructions:</h5>
|
||||
<ol style="margin-bottom: 30px">
|
||||
<li>Sign up at
|
||||
<a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>">https://<%= ApplicationConfig["APP_DOMAIN"] %></a></li>
|
||||
<li>Navigate to
|
||||
<a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>/settings/organization">https://<%= ApplicationConfig["APP_DOMAIN"] %>/settings/organization</a>
|
||||
</li>
|
||||
<li>Paste the secret code below and click <b>Join Organization</b></li>
|
||||
</ol>
|
||||
<h5>Your secret: (You should rotate this regularly)</h5>
|
||||
<clipboard-copy for="settings-org-secret" onclick="nextElementSibling.hidden = false">
|
||||
<input type="text" class="settings-org-secret" id="settings-org-secret" value="<%= @organization.secret %>" readonly aria-label="Organization secret (to be rotated regularly)">
|
||||
<%= image_tag "content-copy.svg", alt: "Copy to clipboard" %>
|
||||
</clipboard-copy>
|
||||
<span class="copy-text-announcer" id="copy-text-announcer" role="alert" hidden>
|
||||
Copied to clipboard!
|
||||
</span>
|
||||
<%= form_tag "/organizations/generate_new_secret", onsubmit: "return confirm('Are you sure you want to generate a new secret? All outstanding secrets will be invalid.');" do %>
|
||||
<%= hidden_field_tag "organization[id]", @organization.id %>
|
||||
<button class="settings-generate-new-secret">Generate New Secret</button>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :nav_image, "Logo for light themes", class: "crayons-field__label" %>
|
||||
<div class="flex items-center">
|
||||
<% if @organization.nav_image_url.present? %>
|
||||
<img alt="<%= @organization.name %> profile image" class="max-w-50 h-auto" src="<%= cloudinary(@organization.nav_image_url, 50) %>" />
|
||||
<% end %>
|
||||
<%= f.file_field :nav_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :dark_nav_image, "Logo for dark themes", class: "crayons-field__label" %>
|
||||
<div class="flex items-center">
|
||||
<% if @organization.dark_nav_image_url.present? %>
|
||||
<img alt="<%= @organization.name %> profile image" class="max-w-50 h-auto" src="<%= cloudinary(@organization.dark_nav_image_url, 50) %>" />
|
||||
<% end %>
|
||||
<%= f.file_field :dark_nav_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :twitter_username, "Twitter username", class: "crayons-field__label" %>
|
||||
<%= f.text_field :twitter_username, class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :github_username, "GitHub username", class: "crayons-field__label" %>
|
||||
<%= f.text_field :github_username, class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :url, "Website url", class: "crayons-field__label" %>
|
||||
<%= f.url_field :url, maxlength: 128, placeholder: "https://yoursite.com", class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :tag_line, class: "crayons-field__label" %>
|
||||
<%= f.text_field :tag_line, maxlength: 60, class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">Limit of 60 characters</p>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :summary, class: "crayons-field__label" %>
|
||||
<%= f.text_area :summary, maxlength: 250, class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">Limit of 250 characters</p>
|
||||
</div>
|
||||
|
||||
<%= render partial: "shared/logo_design", locals: { f: f, account: @organization_membership.organization } %>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :location, class: "crayons-field__label" %>
|
||||
<%= f.text_field :location, maxlength: 64, class: "crayons-textfield", placeholder: "Halifax, Nova Scotia" %>
|
||||
<p class="crayons-field__description">Limit of 64 characters</p>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :email, "Support email", class: "crayons-field__label" %>
|
||||
<%= f.text_field :email, maxlength: 64, placeholder: "mail@example.com", class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">Limit of 64 characters</p>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :company_size, "Organization size", class: "crayons-field__label" %>
|
||||
<%= f.text_field :company_size, maxlength: 7, placeholder: "...", class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">Enter a number</p>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :story, "Our story", class: "crayons-field__label" %>
|
||||
<%= f.text_area :story, maxlength: 640, placeholder: "...", class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">Limit of 640 characters</p>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :tech_stack, "Our stack", class: "crayons-field__label" %>
|
||||
<%= f.text_area :tech_stack, maxlength: 640, placeholder: "...", class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">Limit of 640 characters</p>
|
||||
</div>
|
||||
<header>
|
||||
<h3 class="mb-2">Call-to-action box</h3>
|
||||
<p>
|
||||
Customizable text that appears to the right of every post for your organization.
|
||||
See an example from the <a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>/devteam/the-dev-badge-is-available-on-font-awesome-2ihe" target="_blank" rel="noopener">DEV Team</a>.
|
||||
</p>
|
||||
</header>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :cta_body_markdown, "Body text", class: "crayons-field__label" %>
|
||||
<%= f.text_area :cta_body_markdown, maxlength: 256, class: "crayons-textfield", placeholder: "..." %>
|
||||
<p class="crayons-field__description">Limited markdown: _italic_ and **bold** is okay. Links, and headers etc. will not show up. 256 character limit.</p>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :cta_button_text, "Link text", class: "crayons-field__label" %>
|
||||
<%= f.text_field :cta_button_text, maxlength: 20, placeholder: "Visit Acme Site", class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">Limit of 20 characters</p>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :cta_button_url, "Link url", class: "crayons-field__label" %>
|
||||
<%= f.text_field :cta_button_url, maxlength: 150, placeholder: "https://example.com", class: "crayons-textfield" %>
|
||||
</div>
|
||||
|
||||
<div><button class="crayons-btn" type="submit">Save</button></div>
|
||||
<% end %>
|
||||
</div>
|
||||
<h3>Organization Details</h3>
|
||||
<%= form_for(@organization) do |f| %>
|
||||
<%= f.hidden_field :id %>
|
||||
<div class="field">
|
||||
<%= f.label :name %>
|
||||
<%= f.text_field :name, maxlength: 50 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :slug, "Username" %>
|
||||
<%= f.text_field :slug, maxlength: 18, minlength: 2 %>
|
||||
<i>Your organization's URL is: <%= app_url(@organization.slug) %></i>
|
||||
</div>
|
||||
<%= f.label :profile_image %>
|
||||
<div class="field">
|
||||
<% if @organization.profile_image_url.present? %>
|
||||
<span class="image-present">
|
||||
<img alt="<%= @organization.name %> profile image" src="<%= cloudinary(@organization.profile_image_url, 50) %>" />
|
||||
<%= f.file_field :profile_image %>
|
||||
</span>
|
||||
<% else %>
|
||||
<%= f.file_field :profile_image %>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= f.label :nav_image, "Image for the light theme" %>
|
||||
<div class="field">
|
||||
<% if @organization.nav_image_url.present? %>
|
||||
<span class="image-present">
|
||||
<img alt="<%= @organization.name %> profile image" src="<%= cloudinary(@organization.nav_image_url, 50) %>" />
|
||||
<%= f.file_field :nav_image %>
|
||||
</span>
|
||||
<% else %>
|
||||
<%= f.file_field :nav_image %>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= f.label :dark_nav_image, "Image for the dark theme" %>
|
||||
<div class="field">
|
||||
<% if @organization.dark_nav_image_url.present? %>
|
||||
<span class="image-present">
|
||||
<img alt="<%= @organization.name %> profile image" src="<%= cloudinary(@organization.dark_nav_image_url, 50) %>" />
|
||||
<%= f.file_field :dark_nav_image %>
|
||||
</span>
|
||||
<% else %>
|
||||
<%= f.file_field :dark_nav_image %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :twitter_username, "Twitter Username" %>
|
||||
<%= f.text_field :twitter_username %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :github_username, "Github Username" %>
|
||||
<%= f.text_field :github_username %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :url, "Site url" %>
|
||||
<%= f.url_field :url, maxlength: 128, placeholder: "https://yoursite.com" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :tag_line %>
|
||||
<%= f.text_field :tag_line, maxlength: 60, placeholder: "Limit of 60 characters" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :summary %>
|
||||
<%= f.text_area :summary, maxlength: 250, placeholder: "Limit of 250 characters" %>
|
||||
</div>
|
||||
<%= render partial: "shared/logo_design", locals: { f: f, account: @organization_membership.organization } %>
|
||||
<div class="field">
|
||||
<%= f.label :location %>
|
||||
<%= f.text_field :location, maxlength: 64, placeholder: "Limit of 64 characters" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :email, "Support Email" %>
|
||||
<%= f.text_field :email, maxlength: 64, placeholder: "Limit of 64 characters" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :company_size, "Organization Size" %>
|
||||
<%= f.text_field :company_size, maxlength: 7, placeholder: "Enter a number" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :story, "Our Story" %>
|
||||
<%= f.text_area :story, maxlength: 640, placeholder: "Limit of 640 characters" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :tech_stack, "Our Stack" %>
|
||||
<%= f.text_area :tech_stack, maxlength: 640, placeholder: "Limit of 640 characters" %>
|
||||
</div>
|
||||
<h2>Call-to-action box</h2>
|
||||
<h4>Customizable text that appears to the right of every post for your organization</h4>
|
||||
<h4>See an example from the
|
||||
<a
|
||||
href="https://<%= ApplicationConfig["APP_DOMAIN"] %>/devteam/the-dev-badge-is-available-on-font-awesome-2ihe"
|
||||
target="_blank"
|
||||
rel="noopener">DEV Team</a>.
|
||||
</h4>
|
||||
<div class="field">
|
||||
<%= f.label :cta_body_markdown, "Body text (Limited markdown — bold/italic/etc)" %>
|
||||
<%= f.text_area :cta_body_markdown, maxlength: 256, placeholder: "**This is an example**
|
||||
|
||||
_italic_ and **bold** is okay. Links, and headers etc. will not show up.
|
||||
|
||||
256 character limit." %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :cta_button_text, "Link Text" %>
|
||||
<%= f.text_field :cta_button_text, maxlength: 20, placeholder: "Limit of 20 characters" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :cta_button_url, "Link url" %>
|
||||
<%= f.text_field :cta_button_url, maxlength: 150, placeholder: "https://example.com" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<div class="settings-org-members">
|
||||
<div>
|
||||
<h3><%= @organization.name %></h3>
|
||||
<% @organization.users.each do |user| %>
|
||||
<div class="settings-org-member-row">
|
||||
<a href="<%= user.path %>"><%= user.name %></a>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="grid gap-2">
|
||||
<% @organization.users.each do |user| %>
|
||||
<div class="crayons-card crayons-card--secondary p-4">
|
||||
<a href="<%= user.path %>"><%= user.name %></a>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Danger zone</h3>
|
||||
<%= form_tag users_leave_org_path(@organization), onsubmit: "return confirm('Are you sure you want to leave this organization?');" do %>
|
||||
|
|
|
|||
|
|
@ -1,72 +1,71 @@
|
|||
<%= javascript_packs_with_chunks_tag "colorPicker", "validateFileInputs", defer: true %>
|
||||
<%= javascript_packs_with_chunks_tag "colorPreview", "validateFileInputs", defer: true %>
|
||||
|
||||
<h3>Join An Organization</h3>
|
||||
<h5>Do you have the secret code?</h5>
|
||||
|
||||
<%= form_tag "/users/join_org" do %>
|
||||
<div class="field">
|
||||
<%= label_tag :org_secret, "Secret" %>
|
||||
<%= text_field_tag :org_secret, nil, placeholder: "Provided to you by an org admin" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= submit_tag "Join Organization" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<br /><br />
|
||||
<hr class="settings-hr" />
|
||||
<h3><em>Or</em> Create An Organization</h3>
|
||||
<sub><em>Starred fields are required</em></sub>
|
||||
|
||||
<%= form_for @organization do |f| %>
|
||||
<div class="field">
|
||||
<%= f.label :name, "Name *" %>
|
||||
<%= f.text_field :name %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :slug, "Username *" %>
|
||||
<%= f.text_field :slug %>
|
||||
<sub><em>Your organization URL will be <%= app_url %>/{username}</em></sub>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :profile_image, "Profile Image *" %>
|
||||
<%= f.file_field :profile_image, accept: "image/*" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :twitter_username, "Twitter Username" %>
|
||||
<%= f.text_field :twitter_username %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :github_username, "Github Username" %>
|
||||
<%= f.text_field :github_username %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :text_color_hex, "Text color (hex)" %>
|
||||
<%= text_field_tag "organization[text_color_hex]", "#000000", placeholder: "Click for color picker", class: "color-picker" %>
|
||||
<div class="color-palette"></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :bg_color_hex, "Background color (hex)" %>
|
||||
<%= text_field_tag "organization[bg_color_hex]", "#FFFFFF", placeholder: "Click for color picker", class: "color-picker" %>
|
||||
<div class="color-palette"></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :url, "Website url *" %>
|
||||
<%= f.url_field :url, placeholder: "https://yoursite.com" %>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :summary, "Summary *" %>
|
||||
<%= f.text_area :summary %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :proof, "Proof *" %>
|
||||
<%= f.text_area :proof, placeholder: "This is just a quick blurb indicating or link that shows that you clearly are associated with this organization." %>
|
||||
<div style="width:560px;max-width:90%;">
|
||||
You must have your organization's permission to submit this form. Dishonesty may result in a permanent suspension.
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<h3>Join An Organization</h3>
|
||||
<%= form_tag "/users/join_org" do %>
|
||||
<div class="crayons-field mb-6">
|
||||
<%= label_tag :org_secret, "Secret code", class: "crayons-field__label" %>
|
||||
<p class="crayons-field__description">Provided to you by an org admin</p>
|
||||
<%= text_field_tag :org_secret, nil, placeholder: "...", class: "crayons-textfield" %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<button class="crayons-btn" type="submit">Join Organization</button>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<p class="align-center fs-small color-base-60 mb-6 fw-bold">OR</p>
|
||||
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<header>
|
||||
<h3 class="mb-2">Create An Organization</h3>
|
||||
<p>Starred fields are required</p>
|
||||
</header>
|
||||
|
||||
<%= form_for @organization, html: { class: "grid gap-6" } do |f| %>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :name, "Name *", class: "crayons-field__label" %>
|
||||
<%= f.text_field :name, class: "crayons-textfield", placeholder: "Acme Inc." %>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :slug, "Username *", class: "crayons-field__label" %>
|
||||
<%= f.text_field :slug, class: "crayons-textfield", placeholder: "acmeinc" %>
|
||||
<p class="crayons-field__description">Your organization URL will be <%= app_url %>/{username}</p>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :profile_image, "Profile image *", class: "crayons-field__label" %>
|
||||
<%= f.file_field :profile_image, accept: "image/*" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :twitter_username, "Twitter username", class: "crayons-field__label" %>
|
||||
<%= f.text_field :twitter_username, class: "crayons-textfield" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :github_username, "GitHub username", class: "crayons-field__label" %>
|
||||
<%= f.text_field :github_username, class: "crayons-textfield" %>
|
||||
</div>
|
||||
|
||||
<%= render partial: "shared/logo_design", locals: { f: f, account: @user } %>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :url, "Website url *", class: "crayons-field__label" %>
|
||||
<%= f.url_field :url, placeholder: "https://yoursite.com", class: "crayons-textfield" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :summary, "Summary *", class: "crayons-field__label" %>
|
||||
<%= f.text_area :summary, class: "crayons-textfield", rows: 3, placeholder: "..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :proof, "Proof *", class: "crayons-field__label" %>
|
||||
<p class="crayons-field__description">This is just a quick blurb indicating or link that shows that you clearly are associated with this organization.</p>
|
||||
<%= f.text_area :proof, placeholder: "...", class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">You must have your organization's permission to submit this form. Dishonesty may result in a permanent suspension.</p>
|
||||
</div>
|
||||
|
||||
<div><button class="crayons-btn" type="submit">Create Organization</button></div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,143 +2,186 @@
|
|||
|
||||
<%= render "users/additional_authentication" %>
|
||||
|
||||
<h4>
|
||||
<a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>/<%= current_user.username %>" aria-label="Go to your profile page">
|
||||
<img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg"
|
||||
alt="<%= community_name %> badge"
|
||||
height="28" width="28"
|
||||
style="vertical-align:-7px;margin-right:4px;" class="dev-badge" />
|
||||
</a>
|
||||
Add the <%= community_name %> badge to your personal site. <a href="/p/badges">Click here for the code</a>
|
||||
</h4>
|
||||
<%= form_for(@user) do |f| %>
|
||||
<div class="field">
|
||||
<%= f.label :email %>
|
||||
<%= f.text_field :email %>
|
||||
<div class="crayons-card mb-6 p-6 grid gap-6">
|
||||
<div class="flex items-center">
|
||||
<a href="https://<%= ApplicationConfig["APP_DOMAIN"] %>/<%= current_user.username %>" aria-label="Go to your profile page" class="mr-2">
|
||||
<img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="<%= community_name %> badge" height="32" width="32" class="dev-badge crayons-icon" />
|
||||
</a>
|
||||
<p>Add the <%= community_name %> badge to your personal site. <a href="/p/badges">Click here for the code</a>.</p>
|
||||
</div>
|
||||
<div class="field checkbox-label-first">
|
||||
<%= f.label :email_public, "Display email on profile" %>
|
||||
<%= f.check_box :email_public %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :username %>
|
||||
<%= f.text_field :username, maxlength: 30 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :name %>
|
||||
<%= f.text_field :name, maxlength: 100 %>
|
||||
</div>
|
||||
<%= f.label :profile_image %>
|
||||
<div class="field">
|
||||
<% if @user.profile_image_url.present? %>
|
||||
<span class="image-present">
|
||||
<img alt="<%= @user.username %> profile image" src="<%= ProfileImage.new(@user).get(width: 50) %>" />
|
||||
<%= f.file_field :profile_image, accept: "image/*" %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= form_for @user do |f| %>
|
||||
<div class="crayons-card mb-6 grid grid-flow-row gap-6 p-6">
|
||||
<div class="crayons-field">
|
||||
<%= f.label :email, class: "crayons-field__label" %>
|
||||
<%= f.text_field :email, class: "crayons-textfield", placeholder: "john.doe@example.com" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :email_public, class: "crayons-checkbox" %>
|
||||
<%= f.label :email_public, "Display email on profile", class: "crayons-field__label" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :username, class: "crayons-field__label" %>
|
||||
<%= f.text_field :username, maxlength: 30, class: "crayons-textfield", placeholder: "johndoe" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :name, class: "crayons-field__label" %>
|
||||
<%= f.text_field :name, maxlength: 100, class: "crayons-textfield", placeholder: "John Doe" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :profile_image, class: "crayons-field__label" %>
|
||||
|
||||
<div class="flex items-center">
|
||||
<% if @user.profile_image_url.present? %>
|
||||
<span class="crayons-avatar crayons-avatar--xl mr-2"><img alt="<%= @user.username %> profile image" src="<%= ProfileImage.new(@user).get(width: 50) %>" class="crayons-avatar__image" /></span>
|
||||
<%= f.file_field :profile_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :website_url, class: "crayons-field__label" %>
|
||||
<%= f.text_field :website_url, maxlength: 100, class: "crayons-textfield", placeholder: "https://yoursite.com" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :summary, class: "crayons-field__label" %>
|
||||
<%= f.text_area :summary, maxlength: 200, class: "crayons-textfield", placeholder: "A short bio...", rows: 3 %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :location, class: "crayons-field__label" %>
|
||||
<%= f.text_field :location, maxlength: 100, class: "crayons-textfield", placeholder: "Halifax, Nova Scotia" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :education, class: "crayons-field__label" %>
|
||||
<%= f.text_field :education, maxlength: 100, class: "crayons-textfield" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :employer_name, class: "crayons-field__label" %>
|
||||
<%= f.text_field :employer_name, maxlength: 100, class: "crayons-textfield", placeholder: "Acme Inc." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :employer_url, class: "crayons-field__label" %>
|
||||
<%= f.text_field :employer_url, maxlength: 100, class: "crayons-textfield", placeholder: "https://dev.com" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :employment_title, class: "crayons-field__label" %>
|
||||
<%= f.text_field :employment_title, maxlength: 100, class: "crayons-textfield", placeholder: "Junior Frontend Engineer" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :mostly_work_with, "Skills/Languages", class: "crayons-field__label" %>
|
||||
<%= f.text_area :mostly_work_with, maxlength: 500, class: "crayons-textfield", rows: 5 %>
|
||||
<p class="crayons-field__description">What tools and languages are you most experienced with? Are you specialized or more of a generalist?</p>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :currently_learning, "I'm getting into", class: "crayons-field__label" %>
|
||||
<%= f.text_area :currently_learning, maxlength: 500, class: "crayons-textfield", rows: 5 %>
|
||||
<p class="crayons-field__description">What are you learning right now? What are the new tools and languages you're picking up in <%= Time.zone.now.year %>?</p>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :currently_hacking_on, "My projects and hacks", class: "crayons-field__label" %>
|
||||
<%= f.text_area :currently_hacking_on, maxlength: 500, class: "crayons-textfield", rows: 5 %>
|
||||
<p class="crayons-field__description">What projects are currently occupying most of your time?</p>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :available_for, class: "crayons-field__label" %>
|
||||
<%= f.text_area :available_for, maxlength: 500, class: "crayons-textfield", rows: 5 %>
|
||||
<p class="crayons-field__description">What kinds of collaborations or discussions are you available for? What's a good reason to say <em>Hey!</em> to you these days?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field checkbox-label-first">
|
||||
<%= f.label :looking_for_work %>
|
||||
<%= f.check_box :looking_for_work %>
|
||||
<div class="crayons-card mb-6 grid gap-4 p-6">
|
||||
<h2>Branding</h2>
|
||||
<%= render partial: "shared/logo_design", locals: { f: f, account: @user } %>
|
||||
</div>
|
||||
<div class="field checkbox-label-first">
|
||||
<%= f.label :looking_for_work_publicly, "Display \"looking for work\" on profile" %>
|
||||
<%= f.check_box :looking_for_work_publicly %>
|
||||
|
||||
<div class="crayons-card mb-6 grid gap-4 p-6">
|
||||
<h2>Work opportunities settings</h2>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :looking_for_work, class: "crayons-checkbox" %>
|
||||
<%= f.label :looking_for_work, class: "crayons-field__label" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :looking_for_work_publicly, class: "crayons-checkbox" %>
|
||||
<%= f.label :looking_for_work_publicly, "Display \"looking for work\" on profile", class: "crayons-field__label" %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :contact_consent, class: "crayons-checkbox" %>
|
||||
<%= f.label :contact_consent, "Recruiters can contact me about job opportunities", class: "crayons-field__label" %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field checkbox-label-first">
|
||||
<%= f.label :contact_consent, "Recruiters can contact me about job opportunities" %>
|
||||
<%= f.check_box :contact_consent %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :website_url %>
|
||||
<%= f.url_field :website_url, maxlength: 100, placeholder: "https://yoursite.com" %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :summary %>
|
||||
<%= f.text_area :summary, placeholder: "a short bio.", maxlength: 200 %>
|
||||
</div>
|
||||
<%= render partial: "shared/logo_design", locals: { f: f, account: @user } %>
|
||||
<div class="field">
|
||||
<%= f.label :location %>
|
||||
<%= f.text_field :location, maxlength: 100 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :education %>
|
||||
<%= f.text_field :education, maxlength: 100 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :employer_name %>
|
||||
<%= f.text_field :employer_name, maxlength: 100 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :employer_url, "Employer URL" %>
|
||||
<%= f.text_field :employer_url, maxlength: 100 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :employment_title %>
|
||||
<%= f.text_field :employment_title, maxlength: 100 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :mostly_work_with, "Skills/Languages" %>
|
||||
<%= f.text_area :mostly_work_with, placeholder: "What tools and languages are you most experienced with? Are you specialized or more of a generalist?", maxlength: 500 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :currently_learning, "I'm getting into" %>
|
||||
<%= f.text_area :currently_learning, placeholder: "What are you learning right now? What are the new tools and languages you're picking up in #{Time.zone.now.year}?", maxlength: 500 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :currently_hacking_on, "My projects and hacks" %>
|
||||
<%= f.text_area :currently_hacking_on, placeholder: "What projects are currently occupying most of your time?", maxlength: 500 %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :available_for %>
|
||||
<%= f.text_area :available_for, placeholder: "What kinds of collaborations or discussions are you available for? What's a good reason to say hey to you these days?", maxlength: 500 %>
|
||||
</div>
|
||||
<p><strong>Links</strong></p>
|
||||
<div class="field">
|
||||
<%= f.label :facebook_url, "Facebook URL" %>
|
||||
<%= f.text_field :facebook_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :stackoverflow_url, "Stack Overflow URL" %>
|
||||
<%= f.url_field :stackoverflow_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :linkedin_url, "LinkedIn URL" %>
|
||||
<%= f.url_field :linkedin_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :behance_url, "Behance URL" %>
|
||||
<%= f.url_field :behance_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :dribbble_url, "Dribbble URL" %>
|
||||
<%= f.url_field :dribbble_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :medium_url, "Medium URL" %>
|
||||
<%= f.url_field :medium_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :gitlab_url, "GitLab URL" %>
|
||||
<%= f.url_field :gitlab_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :instagram_url, "Instagram URL" %>
|
||||
<%= f.url_field :instagram_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :mastodon_url, "Mastodon URL" %>
|
||||
<%= f.url_field :mastodon_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<%= f.label :twitch_url, "Twitch URL" %>
|
||||
<%= f.url_field :twitch_url %>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<%= f.hidden_field :tab, value: @tab %>
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
|
||||
<div class="crayons-card mb-6 grid gap-6 p-6">
|
||||
<h2>Links</h2>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :facebook_url, "Facebook profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :facebook_url, class: "crayons-textfield", placeholder: "https://facebook.com/..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :stackoverflow_url, "Stack Overflow profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :stackoverflow_url, class: "crayons-textfield", placeholder: "https://stackoverflow.com/users/..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :linkedin_url, "LinkedIn profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :linkedin_url, class: "crayons-textfield", placeholder: "https://..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :behance_url, "Behance profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :behance_url, class: "crayons-textfield", placeholder: "https://..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :dribbble_url, "Dribbble profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :dribbble_url, class: "crayons-textfield", placeholder: "https://dribbble.com/..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :medium_url, "Medium profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :medium_url, class: "crayons-textfield", placeholder: "https://..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :gitlab_url, "GitLab profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :gitlab_url, class: "crayons-textfield", placeholder: "https://..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :instagram_url, "Instagram profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :instagram_url, class: "crayons-textfield", placeholder: "https://..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :mastodon_url, "Mastodon profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :mastodon_url, class: "crayons-textfield", placeholder: "https://..." %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :twitch_url, "Twitch profile URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :twitch_url, class: "crayons-textfield", placeholder: "https://..." %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= f.hidden_field :tab, value: @tab %>
|
||||
|
||||
<button type="submit" class="crayons-btn">Save</button>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,52 @@
|
|||
<h3>Publishing to <%= community_name %> from RSS</h3>
|
||||
<% if @user.feed_url.present? %>
|
||||
<%= form_for(@user) do |f| %>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<%= f.hidden_field :feed_url, value: @user.feed_url %>
|
||||
<%= f.hidden_field :tab, value: @tab %>
|
||||
<%= f.submit "Fetch Feed Now", class: "cta" %>
|
||||
<p><em>
|
||||
Last Fetched: <time id="rss-fetch-time" datetime="<%= @user.feed_fetched_at.iso8601 %>">
|
||||
</time>
|
||||
</em></p>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<p>
|
||||
Posts will land in your <a href="/dashboard">dashboard</a>
|
||||
<b><em>as drafts</em></b>, and then you can publish from there (or give <%= community_name %> admins permission to do so).
|
||||
</p>
|
||||
<p>
|
||||
Formatting will typically look good, but you may have to make manual fixes. In the case of Medium, you may have to manually fix embeds.
|
||||
</p>
|
||||
<p>
|
||||
To find out more about how drafts are created from your feed, read this
|
||||
<a href="/p/publishing_from_rss_guide">guide</a>.
|
||||
</p>
|
||||
<p>
|
||||
Your feed will be fetched every time you submit this form and updates will be automatically fetched periodically thereafter. Contact
|
||||
<a href="mailto:<%= SiteConfig.default_site_email %>"><%= SiteConfig.default_site_email %></a> if you encounter issues.
|
||||
</p>
|
||||
<p>
|
||||
FYI: Medium RSS feed URLs are <em>https://medium.com/feed/@your_username</em>
|
||||
</p>
|
||||
<p>
|
||||
<em>By submitting your RSS Feed URL, you agree that you own and/or have permission to syndicate the associated content.</em>
|
||||
</p>
|
||||
<%= form_for(@user) do |f| %>
|
||||
<div class="field">
|
||||
<b><%= f.label :feed_url, "RSS Feed URL" %></b>
|
||||
<%= f.url_field :feed_url, placeholder: "https://www.your-site-here.com/feed/" %>
|
||||
<div class="crayons-card grid p-6 mb-6 gap-6">
|
||||
<div class="grid gap-4">
|
||||
<h3>Publishing to <%= community_name %> from RSS</h3>
|
||||
<% if @user.feed_url.present? %>
|
||||
<%= form_for(@user) do |f| %>
|
||||
<%= f.hidden_field :feed_url, value: @user.feed_url %>
|
||||
<%= f.hidden_field :tab, value: @tab %>
|
||||
<div class="flex items-center">
|
||||
<button type="submit" class="crayons-btn crayons-btn--secondary">Fetch feed now</button>
|
||||
<p>Last Fetched: <time id="rss-fetch-time" datetime="<%= @user.feed_fetched_at.iso8601 %>"></time></p>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<p>
|
||||
Posts will land in your <a href="/dashboard">dashboard</a>
|
||||
<strong>as drafts</strong>, and then you can publish from there (or give <%= community_name %> admins permission to do so).
|
||||
</p>
|
||||
<p>Formatting will typically look good, but you may have to make manual fixes. In the case of Medium, you may have to manually fix embeds.</p>
|
||||
<p>
|
||||
To find out more about how drafts are created from your feed, read this
|
||||
<a href="/p/publishing_from_rss_guide">guide</a>.
|
||||
</p>
|
||||
<p>
|
||||
Your feed will be fetched every time you submit this form and updates will be automatically fetched periodically thereafter. Contact
|
||||
<a href="mailto:<%= SiteConfig.default_site_email %>"><%= SiteConfig.default_site_email %></a> if you encounter issues.
|
||||
</p>
|
||||
<p>FYI: Medium RSS feed URLs are <em>https://medium.com/feed/@your_username</em></p>
|
||||
<p><em>By submitting your RSS Feed URL, you agree that you own and/or have permission to syndicate the associated content.</em></p>
|
||||
</div>
|
||||
<div class="checkbox-field">
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :feed_mark_canonical %>
|
||||
<%= f.label :feed_mark_canonical, "Mark the RSS source as canonical URL by default" %>
|
||||
<div class="field-explainer">
|
||||
If you check this box, the post will automatically mark the feed source as the canonical URL.
|
||||
</div>
|
||||
|
||||
<%= form_for @user, html: { class: "grid gap-6" } do |f| %>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :feed_url, "RSS Feed URL", class: "crayons-field__label" %>
|
||||
<%= f.url_field :feed_url, placeholder: "https://yoursite.com/feed/", class: "crayons-textfield" %>
|
||||
</div>
|
||||
|
||||
<div class="sub-field">
|
||||
<%= f.check_box :feed_referential_link %>
|
||||
<%= f.label :feed_referential_link, "Replace self-referential links with #{community_name}-specific links" %>
|
||||
<div class="field-explainer">
|
||||
If you check this box, the post will automatically change any URLs included in the post to refer to the version of that article on <%= community_name %> if available. This is primarily meant for folks migrating their entire blog onto <%= community_name %>.
|
||||
</div>
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :feed_mark_canonical, class: "crayons-checkbox" %>
|
||||
<%= f.label :feed_mark_canonical, "Mark the RSS source as canonical URL by default <p class='crayons-field__description'>If you check this box, the post will automatically mark the feed source as the canonical URL.</p>".html_safe, class: "crayons-field__label" %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label></label>
|
||||
|
||||
<div class="crayons-field crayons-field--checkbox">
|
||||
<%= f.check_box :feed_referential_link, class: "crayons-checkbox" %>
|
||||
<%= f.label :feed_referential_link, "Replace self-referential links with #{community_name}-specific links <p class='crayons-field__description'>If you check this box, the post will automatically change any URLs included in the post to refer to the version of that article on #{community_name} if available. This is primarily meant for folks migrating their entire blog onto #{community_name}.</p>".html_safe, class: "crayons-field__label" %>
|
||||
</div>
|
||||
|
||||
<%= f.hidden_field :tab, value: @tab %>
|
||||
<% button_text = @user.feed_url.present? ? "UPDATE" : "SUBMIT" %>
|
||||
<%= f.submit button_text, class: "cta" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% button_text = @user.feed_url.present? ? "Save" : "Submit" %>
|
||||
<div><button class="crayons-btn" type="submit"><%= button_text %></button></div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,57 @@
|
|||
<h3>Personal Response Templates</h3>
|
||||
<p>Response templates are snippets that you can re-use for quick and accurate comments.</p>
|
||||
<p class="mb-6">Response templates are snippets that you can re-use for quick and accurate comments.</p>
|
||||
|
||||
<% if @response_templates.present? %>
|
||||
<h3>Your templates</h3>
|
||||
<div class="github-repos-container">
|
||||
<div class="github-repos">
|
||||
<% @response_templates.each do |response_template| %>
|
||||
<div class="github-repo-row <%= "github-repo-row-selected" if response_template.id == params[:id].to_i %>">
|
||||
<div class="github-repo-row-name response-template-row-name">
|
||||
<%= response_template.title %>
|
||||
<%= form_with url: response_template_path(response_template.id), method: :delete, local: true, html: { onsubmit: "return confirm('Are you sure you want to delete: #{response_template.title}?');" } do %>
|
||||
<button type="submit" class="cta danger-button">DELETE</button>
|
||||
<% end %>
|
||||
<a class="cta" href="/settings/response-templates/<%= response_template.id %>" role="button">EDIT</a>
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<h3>Your templates</h3>
|
||||
|
||||
<div class="github-repos-container -mt-4">
|
||||
<div class="github-repos">
|
||||
<% @response_templates.each do |response_template| %>
|
||||
<div class="github-repo-row <%= "github-repo-row-selected" if response_template.id == params[:id].to_i %>">
|
||||
<div class="github-repo-row-name flex items-center crayons-card crayons-card--secondary p-2 pl-4 mt-2">
|
||||
<div class="flex-1">
|
||||
<%= response_template.title %>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<%= form_with url: response_template_path(response_template.id), method: :delete, local: true, html: { onsubmit: "return confirm('Are you sure you want to delete: #{response_template.title}?');" } do %>
|
||||
<button type="submit" class="crayons-btn crayons-btn--secondary">Remove</button>
|
||||
<% end %>
|
||||
<a class="crayons-btn crayons-btn--secondary ml-2" href="/settings/response-templates/<%= response_template.id %>" role="button">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<hr>
|
||||
<% if @response_template.persisted? %>
|
||||
<% title = params[:previous_title] || @response_template.title %>
|
||||
<% content = params[:previous_content] || @response_template.content %>
|
||||
<h3>Editing a response template</h3>
|
||||
<a href="/settings/response-templates">Create a new response template</a>
|
||||
<% else %>
|
||||
<% title = params[:previous_title] %>
|
||||
<% content = params[:previous_content] %>
|
||||
<h3>Add a new response template</h3>
|
||||
<% end %>
|
||||
|
||||
<%= form_with model: @response_template do |f| %>
|
||||
<%= f.label :title %>
|
||||
<%= f.text_field :title, placeholder: "Memorable cue for template", value: title %>
|
||||
<%= f.label :content, "Comment body (Markdown)" %>
|
||||
<%= f.text_area :content, value: content %>
|
||||
<%= f.submit "Submit", class: "cta" %>
|
||||
<div class="crayons-card grid gap-6 p-6 mb-6">
|
||||
<header>
|
||||
<% if @response_template.persisted? %>
|
||||
<% title = params[:previous_title] || @response_template.title %>
|
||||
<% content = params[:previous_content] || @response_template.content %>
|
||||
<h3>Editing a response template</h3>
|
||||
<a href="/settings/response-templates">Create a new response template</a>
|
||||
<% else %>
|
||||
<% title = params[:previous_title] %>
|
||||
<% content = params[:previous_content] %>
|
||||
<h3>Add a new response template</h3>
|
||||
<% end %>
|
||||
</header>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :title, class: "crayons-field__label" %>
|
||||
<%= f.text_field :title, placeholder: "...", value: title, class: "crayons-textfield" %>
|
||||
<p class="crayons-field__description">Memorable cue for template</p>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :content, "Comment body (Markdown)", class: "crayons-field__label" %>
|
||||
<%= f.text_area :content, value: content, class: "crayons-textfield" %>
|
||||
</div>
|
||||
|
||||
<div><button type="submit" class="crayons-btn">Save template</button></div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
<label
|
||||
class="rich-selector theme-selector theme-selector--<%= theme.tr(" ", "-") %>"
|
||||
title="<%= theme.titlecase %>">
|
||||
<%= f.radio_button :config_theme,
|
||||
theme,
|
||||
checked: @user.config_theme.tr("_", " ") == theme,
|
||||
class: "rich-selector__radio" %>
|
||||
<div class="rich-selector__indicator"></div>
|
||||
<div class="rich-selector__outline"></div>
|
||||
<div class="theme-selector__nav">
|
||||
<div class="theme-selector__search"></div>
|
||||
</div>
|
||||
<div class="theme-selector__body">
|
||||
<div class="theme-selector__col"></div>
|
||||
<div class="theme-selector__col--center">
|
||||
~ ~ ~ ~ ~
|
||||
<div class="theme-selector__posts"></div>
|
||||
<label class="rich-selector crayons-field crayons-field--radio p-4 theme-selector theme-selector--<%= theme.tr(" ", "-") %>" title="<%= theme.titlecase %>">
|
||||
<%= f.radio_button :config_theme, theme, checked: @user.config_theme.tr("_", " ") == theme, class: "crayons-radio" %>
|
||||
<div class="crayons-field__label">
|
||||
<%= theme.titlecase %>
|
||||
|
||||
<div class="theme-preview mt-4">
|
||||
<div class="theme-preview__nav">
|
||||
<div class="theme-preview__search"></div>
|
||||
</div>
|
||||
<div class="theme-preview__main">
|
||||
<div class="theme-preview__card"></div>
|
||||
<div class="theme-preview__middle">
|
||||
~ ~ ~
|
||||
<div class="theme-preview__card"></div>
|
||||
</div>
|
||||
<div class="theme-preview__card"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-selector__col"></div>
|
||||
</div>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,60 @@
|
|||
<%= form_for(@user, html: { id: "ux-customization-form" }) do |f| %>
|
||||
<h2>Style Customization</h2>
|
||||
<div class="sub-field">
|
||||
<%= f.label :config_theme, "Site Theme" %>
|
||||
<div class="theme-selector-field">
|
||||
<% ["default", "night theme", "minimal light theme", "pink theme", "ten x hacker theme"].each do |theme| %>
|
||||
<%= render partial: "theme_selector", locals: { f: f, theme: theme } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.label :config_font, "Base Reading Font" %>
|
||||
<div class="theme-selector-field">
|
||||
<% ["default", "sans serif", "monospace", "comic sans", "open dyslexic"].each do |font| %>
|
||||
<%= render partial: "font_selector", locals: { f: f, font: font } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-field">
|
||||
<%= f.label :config_navbar, "Site Navbar" %>
|
||||
<div class="theme-selector-field">
|
||||
<% ["default", "static"].each do |navbar| %>
|
||||
<%= render partial: "navbar_selector", locals: { f: f, navbar: navbar } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<%= form_for @user, html: { id: "ux-customization-form", class: "grid gap-6" } do |f| %>
|
||||
<div class="crayons-card grid gap-6 p-6">
|
||||
<h2>Style Customization</h2>
|
||||
|
||||
<h2>Writing</h2>
|
||||
<div class="sub-field">
|
||||
<%= f.label :editor_version, "Editor Version" %>
|
||||
<div class="theme-selector-field">
|
||||
<% ["v1", "v2"].each do |version| %>
|
||||
<%= render partial: "editor_selector", locals: { f: f, version: version } %>
|
||||
<% end %>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :config_theme, "Site Theme", class: "crayons-field__label" %>
|
||||
<div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
|
||||
<% ["default", "night theme", "minimal light theme", "pink theme", "ten x hacker theme"].each do |theme| %>
|
||||
<%= render partial: "theme_selector", locals: { f: f, theme: theme } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Content Customization</h2>
|
||||
<div class="sub-field">
|
||||
<%= f.label :experience_level, "What is your approximate coding experience level (1-5)?" %>
|
||||
<div class="theme-selector-field">
|
||||
<% ["1", "3", "5", "8", "10"].each_with_index do |exp, i| %>
|
||||
<%= render partial: "experience_selector", locals: { f: f, exp: exp, i: i } %>
|
||||
<% end %>
|
||||
<div>
|
||||
<sub><em>This will not be displayed on your profile or anywhere publicly. It helps gently determine what content you are shown along with tags you follow etc.</em></sub>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :config_font, "Base Reading Font", class: "crayons-field__label" %>
|
||||
<div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
|
||||
<% ["default", "sans serif", "monospace", "comic sans", "open dyslexic"].each do |font| %>
|
||||
<%= render partial: "font_selector", locals: { f: f, font: font } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<%= f.label :config_navbar, "Site Navbar", class: "crayons-field__label" %>
|
||||
<div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
|
||||
<% ["default", "static"].each do |navbar| %>
|
||||
<%= render partial: "navbar_selector", locals: { f: f, navbar: navbar } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label></label>
|
||||
<%= f.hidden_field :tab, value: @tab, id: nil %>
|
||||
<%= f.submit "SUBMIT", class: "cta" %>
|
||||
<div class="crayons-card grid gap-6 p-6">
|
||||
<h2>Writing</h2>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :editor_version, "Editor Version", class: "crayons-field__label" %>
|
||||
<div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
|
||||
<% ["v1", "v2"].each do |version| %>
|
||||
<%= render partial: "editor_selector", locals: { f: f, version: version } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="crayons-card grid gap-6 p-6">
|
||||
<h2>Content Customization</h2>
|
||||
<div class="crayons-field">
|
||||
<%= f.label :experience_level, "What is your approximate coding experience level (1-5)?", class: "crayons-field__label" %>
|
||||
<div class="theme-selector-field grid grid-cols-5">
|
||||
<% ["1", "3", "5", "8", "10"].each_with_index do |exp, i| %>
|
||||
<%= render partial: "experience_selector", locals: { f: f, exp: exp, i: i } %>
|
||||
<% end %>
|
||||
</div>
|
||||
<p>This will not be displayed on your profile or anywhere publicly. It helps gently determine what content you are shown along with tags you follow etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= f.hidden_field :tab, value: @tab, id: nil %>
|
||||
<div><button class="crayons-btn" type="submit">Submit</button></div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,106 +1,102 @@
|
|||
<% title "Settings" %>
|
||||
|
||||
<% if flash[:settings_notice] %>
|
||||
<div class="notice" id="notice">
|
||||
<div class="crayons-banner">
|
||||
<%= flash[:settings_notice] %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if flash[:error].present? %>
|
||||
<div class="notice error-notice" id="notice">
|
||||
<div class="crayons-banner crayons-banner--error">
|
||||
<%= flash[:error] %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if params[:state] == "previous-registration" %>
|
||||
<div class="notice error-notice" id="notice">
|
||||
<div class="crayons-banner crayons-banner--error">
|
||||
There is an existing account authorized with that social account. Contact
|
||||
<a href="mailto:<%= SiteConfig.default_site_email %>"><%= SiteConfig.default_site_email %></a> if this is a mistake.
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="user-settings-page">
|
||||
<% if @tab == "organization" && @organizations.present? %>
|
||||
<h2>Settings for
|
||||
<span class="organization-dropdown">
|
||||
<select id="organization-dropdown-select" onchange="window.location.href=this.value">
|
||||
<% options = @organizations.pluck(:slug, :id).each do |arr| %>
|
||||
<% arr[0] = "@#{arr[0]}" %>
|
||||
<% arr[1] = "/settings/organization/#{arr[1]}" %>
|
||||
<% end.to_h.merge("New Organization" => "/settings/organization/new") %>
|
||||
<%= options_for_select(options, "/settings/organization/#{params[:org_id]}") %>
|
||||
<%# For example: %>
|
||||
<%# <option value="/settings/organization/1>@devteam</option> %>
|
||||
<%# <option value="/settings/organization/new" selected>New Organization</option> %>
|
||||
</select>
|
||||
</span>
|
||||
</h2>
|
||||
<% else %>
|
||||
<h2>Settings for <a href="/<%= @user.username %>">@<%= @user.username %></a></h2>
|
||||
<% end %>
|
||||
<% if current_user.email.blank? %>
|
||||
<div class="finish-notice">
|
||||
Confirm your email to complete your profile
|
||||
<div class="small">
|
||||
while you're at it, go ahead and fill everything out.<br />
|
||||
<% if @user.twitter_username.blank? %>
|
||||
connect your twitter account as well to complete your identity.
|
||||
<% elsif @user.github_username.blank? %>
|
||||
connect your github account as well to complete your identity.
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @user.unconfirmed_email.present? %>
|
||||
<div class="field-notice">
|
||||
Email Verification
|
||||
<div class="small">
|
||||
you have requested a change to
|
||||
<a href="mailto:<%= @user.unconfirmed_email %>"><%= @user.unconfirmed_email %></a><br />
|
||||
check your inbox for the verification link to finalize the change.
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @user.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2><%= pluralize(@user.errors.count, "error") %> prohibited your profile from being saved:</h2>
|
||||
|
||||
<ul>
|
||||
<% @user.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @organization && @organization.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2><%= pluralize(@organization.errors.count, "error") %> prohibited your org profile from being saved:</h2>
|
||||
|
||||
<ul>
|
||||
<% @organization.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="settings-hub">
|
||||
<% @tab_list.each do |possible_tab| %>
|
||||
<% if @tab == possible_tab.downcase.tr(" ", "-") %>
|
||||
<div class="single-settings-tab selected">
|
||||
<%= possible_tab %>
|
||||
</div>
|
||||
<% else %>
|
||||
<a class="single-settings-tab" href="/settings/<%= possible_tab.downcase.tr(" ", "-") %>">
|
||||
<main class="crayons-layout crayons-layout--max-l crayons-layout--default">
|
||||
<div class="crayons-layout__sidebar">
|
||||
<nav>
|
||||
<% @tab_list.each do |possible_tab| %>
|
||||
<a class="crayons-link crayons-link--block <% if @tab == possible_tab.downcase.tr(' ', '-') %>crayons-link--current<% end %>" href="/settings/<%= possible_tab.downcase.tr(" ", "-") %>">
|
||||
<%= possible_tab %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="settings-form">
|
||||
|
||||
<div class="crayons-layout__content">
|
||||
<header class="crayons-layout__page-header px-3 s:px-0 mb-4">
|
||||
<% if @tab == "organization" && @organizations.present? %>
|
||||
<h1 class="fs-xl s:fs-3xl">Settings for
|
||||
<span class="organization-dropdown">
|
||||
<select id="organization-dropdown-select" onchange="window.location.href=this.value">
|
||||
<% options = @organizations.pluck(:slug, :id).each do |arr| %>
|
||||
<% arr[0] = "@#{arr[0]}" %>
|
||||
<% arr[1] = "/settings/organization/#{arr[1]}" %>
|
||||
<% end.to_h.merge("New Organization" => "/settings/organization/new") %>
|
||||
<%= options_for_select(options, "/settings/organization/#{params[:org_id]}") %>
|
||||
<%# For example: %>
|
||||
<%# <option value="/settings/organization/1>@devteam</option> %>
|
||||
<%# <option value="/settings/organization/new" selected>New Organization</option> %>
|
||||
</select>
|
||||
</span>
|
||||
</h1>
|
||||
<% else %>
|
||||
<h1 class="fs-xl s:fs-3xl">Settings for <a href="/<%= @user.username %>">@<%= @user.username %></a></h1>
|
||||
<% end %>
|
||||
</header>
|
||||
|
||||
<% if current_user.email.blank? %>
|
||||
<div class="crayons-notice crayons-notice--warning mb-6">
|
||||
<h3 class="mb-2">Confirm your email to complete your profile.</h3>
|
||||
<p>
|
||||
While you're at it, go ahead and fill everything out.
|
||||
<% if @user.twitter_username.blank? %>
|
||||
Connect your twitter account as well to complete your identity.
|
||||
<% elsif @user.github_username.blank? %>
|
||||
Connect your github account as well to complete your identity.
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @user.unconfirmed_email.present? %>
|
||||
<div class="crayons-notice crayons-notice--warning mb-6">
|
||||
<h3 class="mb-2">Email verification.</h3>
|
||||
<p>You have requested a change to <a href="mailto:<%= @user.unconfirmed_email %>"><%= @user.unconfirmed_email %></a>. Check your inbox for the verification link to finalize the change.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @user.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2><%= pluralize(@user.errors.count, "error") %> prohibited your profile from being saved:</h2>
|
||||
|
||||
<ul>
|
||||
<% @user.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @organization && @organization.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2><%= pluralize(@organization.errors.count, "error") %> prohibited your org profile from being saved:</h2>
|
||||
|
||||
<ul>
|
||||
<% @organization.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= render "users/" + @tab.tr("-", "_"), tab: @tab %>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ RSpec.describe "UserDestroy", type: :request do
|
|||
it "offers to delete account when user has an email" do
|
||||
sign_in user
|
||||
get "/settings/account"
|
||||
expect(response.body).to include("DELETE ACCOUNT").and include("Deleting your account will")
|
||||
expect(response.body).to include("Delete Account").and include("Deleting your account will")
|
||||
end
|
||||
|
||||
it "offers to set an email when user doesn't have an email" do
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ RSpec.describe "UserSettings", type: :request do
|
|||
it "renders CONNECT_WITH_TWITTER and user with only github identity" do
|
||||
user.identities.where(provider: "twitter").delete_all
|
||||
get "/settings"
|
||||
expect(response.body).to include "CONNECT TWITTER ACCOUNT"
|
||||
expect(response.body).to include "Connect Twitter Account"
|
||||
end
|
||||
|
||||
it "renders does not render CONNECT_WITH_TWITTER if SiteConfig does not include Twitter auth" do
|
||||
|
|
@ -74,7 +74,7 @@ RSpec.describe "UserSettings", type: :request do
|
|||
SiteConfig.authentication_providers = ["github"]
|
||||
SiteConfig.clear_cache
|
||||
get "/settings"
|
||||
expect(response.body).not_to include "CONNECT TWITTER ACCOUNT"
|
||||
expect(response.body).not_to include "Connect Twitter Account"
|
||||
SiteConfig.authentication_providers = current_auth_value # restore prior value
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@ RSpec.describe "Organization setting page(/settings/organization)", type: :syste
|
|||
end
|
||||
|
||||
it "user creates an organization" do
|
||||
visit "settings/organization"
|
||||
visit "/settings/organization"
|
||||
fill_in_org_form
|
||||
click_button "SUBMIT"
|
||||
click_button "Create Organization"
|
||||
|
||||
expect(page).to have_text("Your organization was successfully created and you are an admin.")
|
||||
end
|
||||
|
||||
|
|
@ -20,7 +21,7 @@ RSpec.describe "Organization setting page(/settings/organization)", type: :syste
|
|||
user2 = create(:user, username: "newuser")
|
||||
create(:organization_membership, user_id: user2.id, organization_id: organization.id)
|
||||
visit "settings/organization"
|
||||
click_button("make admin")
|
||||
click_button("Make admin")
|
||||
page.driver.browser.switch_to.alert.accept
|
||||
expect(page).to have_text("#{user2.name} is now an admin.")
|
||||
end
|
||||
|
|
@ -30,7 +31,7 @@ RSpec.describe "Organization setting page(/settings/organization)", type: :syste
|
|||
user2 = create(:user, username: "newuser")
|
||||
create(:organization_membership, user_id: user2.id, organization_id: organization.id, type_of_user: "admin")
|
||||
visit "settings/organization"
|
||||
click_button("revoke admin status")
|
||||
click_button("Revoke admin status")
|
||||
page.driver.browser.switch_to.alert.accept
|
||||
expect(page).to have_text("#{user2.name} is no longer an admin.")
|
||||
end
|
||||
|
|
@ -52,8 +53,8 @@ RSpec.describe "Organization setting page(/settings/organization)", type: :syste
|
|||
"organization_profile_image",
|
||||
Rails.root.join("app/assets/images/android-icon-36x36.png"),
|
||||
)
|
||||
fill_in "Text color (hex)", with: "#ffffff"
|
||||
fill_in "Background color (hex)", with: "#000000"
|
||||
fill_in "organization[bg_color_hex]", with: "#000000"
|
||||
fill_in "organization[text_color_hex]", with: "#ffffff"
|
||||
fill_in "organization[url]", with: "http://company.com"
|
||||
fill_in "organization[summary]", with: "Summary"
|
||||
fill_in "organization[proof]", with: "Proof"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ RSpec.describe "User destroys their profile", type: :system, js: true do
|
|||
it "requests self-destroy" do
|
||||
visit "/settings/account"
|
||||
allow(Users::RequestDestroy).to receive(:call).and_call_original
|
||||
click_button "DELETE ACCOUNT"
|
||||
click_button "Delete Account"
|
||||
expect(Users::RequestDestroy).to have_received(:call).with(user)
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@ RSpec.describe "User uses response templates settings", type: :system do
|
|||
context "when user has a response template already" do
|
||||
it "can go to the edit page of the response template" do
|
||||
visit "/settings/response-templates"
|
||||
click_link "EDIT"
|
||||
click_link "Edit"
|
||||
expect(page).to have_current_path "/settings/response-templates/#{response_template.id}", ignore_query: true
|
||||
end
|
||||
|
||||
it "shows the proper message when deleting a reponse template", js: true do
|
||||
visit "/settings/response-templates"
|
||||
accept_confirm { click_button "DELETE" }
|
||||
accept_confirm { click_button "Remove" }
|
||||
expect(page).to have_text "was deleted."
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ RSpec.describe "Looking For Work", type: :system do
|
|||
visit "/settings"
|
||||
page.check "Looking for work"
|
||||
sidekiq_perform_enqueued_jobs do
|
||||
click_button("SUBMIT")
|
||||
click_button("Save")
|
||||
end
|
||||
expect(page).to have_text("Your profile was successfully updated")
|
||||
expect(user.follows.count).to eq(1)
|
||||
|
|
|
|||
|
|
@ -15,16 +15,16 @@ RSpec.describe "users/edit", type: :view do
|
|||
create(:identity, user: user, provider: "twitter")
|
||||
|
||||
render
|
||||
expect(rendered).to match(/CONNECT GITHUB ACCOUNT/)
|
||||
expect(rendered).not_to match(/CONNECT TWITTER ACCOUNT/)
|
||||
expect(rendered).to match(/Connect GitHub Account/)
|
||||
expect(rendered).not_to match(/Connect Twitter Account/)
|
||||
end
|
||||
|
||||
it "asks user to connect with twitter if it's missing" do
|
||||
create(:identity, user: user, provider: "github")
|
||||
|
||||
render
|
||||
expect(rendered).to match(/CONNECT TWITTER ACCOUNT/)
|
||||
expect(rendered).not_to match(/CONNECT GITHUB ACCOUNT/)
|
||||
expect(rendered).to match(/Connect Twitter Account/)
|
||||
expect(rendered).not_to match(/Connect GitHub Account/)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue