mirror of
https://github.com/discourse/discourse.git
synced 2025-03-09 14:34:35 +00:00
6ae065f9cd
* FEATURE: Always show advanced invite options The UI is more simple and more efficient than how it was when the advanced options toggle was introduced. It does not make sense to keep it anymore. * UX: Minor copy edits * UX: Merge expire invite controls There were two controls in the create invite modal. One was a static text that displayed how much time is left until the invite expires. The other one was a datetime selector that set the time the invite expires. This commit merges the two controls in a single one: staff users will continue to see the datetime selector without the static text and regular users will only see the static text because they cannot set when the invite expires. * UX: Remove invite link It should only be visible after the invite was created.
215 lines
3.3 KiB
SCSS
215 lines
3.3 KiB
SCSS
// styles that apply to the "share" modal & popup when sharing a link to a post or topic
|
|
|
|
.link-share-container,
|
|
.notify-user-input {
|
|
display: flex;
|
|
.btn {
|
|
margin-left: 0.5em;
|
|
}
|
|
input,
|
|
.select-kit {
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.link-share-restricted-groups {
|
|
margin-top: 0.5em;
|
|
color: var(--danger-medium);
|
|
}
|
|
|
|
.link-share-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
button {
|
|
margin-top: 0.5em;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.sources {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.new-topic {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.alt-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.share-twitter {
|
|
.d-icon {
|
|
color: var(--twitter);
|
|
}
|
|
}
|
|
.share-facebook {
|
|
.d-icon {
|
|
color: var(--facebook);
|
|
}
|
|
}
|
|
|
|
// post share popup
|
|
|
|
#share-link {
|
|
position: absolute;
|
|
z-index: z("dropdown");
|
|
box-shadow: shadow("card");
|
|
background-color: var(--secondary);
|
|
padding: 0.5em;
|
|
width: 20em; // scales with user font-size
|
|
max-width: 100vw; // prevents overflow due to extra large user font-size
|
|
display: none;
|
|
&.visible {
|
|
display: block;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 0.5em;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
h3 {
|
|
font-size: $font-0;
|
|
margin: 0;
|
|
}
|
|
|
|
.date {
|
|
font-weight: normal;
|
|
color: var(--primary-med-or-secondary-med);
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.btn.close {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// topic share modal
|
|
|
|
.share-topic-modal {
|
|
form {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.invite-users {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 1.5em 0 0.25em;
|
|
width: 100%;
|
|
|
|
button {
|
|
margin-top: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// topic invite modal
|
|
|
|
.create-invite-modal {
|
|
form {
|
|
margin: 0;
|
|
}
|
|
|
|
input {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
label {
|
|
margin-right: 0.5em;
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
margin-right: 0.75em;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.input-group:not(:last-of-type) {
|
|
margin-bottom: 1em;
|
|
}
|
|
.input-group.input-expires-at,
|
|
.input-group.input-email,
|
|
.input-group.invite-max-redemptions {
|
|
input[type="text"] {
|
|
width: unset;
|
|
}
|
|
}
|
|
|
|
.existing-topic,
|
|
p {
|
|
// p is for "no topics found"
|
|
margin-left: 1.75em;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.input-group.input-email {
|
|
display: flex;
|
|
align-items: baseline;
|
|
label {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.invite-email-container {
|
|
flex: 1 1 auto;
|
|
#invite-email {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.invite-max-redemptions {
|
|
label {
|
|
display: inline;
|
|
}
|
|
input {
|
|
width: 80px;
|
|
}
|
|
}
|
|
|
|
.invite-custom-message {
|
|
label {
|
|
margin-left: 1.75em;
|
|
}
|
|
}
|
|
|
|
.input-group {
|
|
textarea#invite-message,
|
|
&.invite-to-topic input[type="text"],
|
|
.group-chooser,
|
|
.user-chooser,
|
|
.future-date-input-selector,
|
|
.future-date-input-date-picker,
|
|
.future-date-input-time-picker {
|
|
margin-left: 1.75em;
|
|
width: calc(100% - 1.75em);
|
|
}
|
|
|
|
.future-date-input-date-picker,
|
|
.future-date-input-time-picker {
|
|
display: inline-block;
|
|
margin: 0em 0em 0em 1.75em;
|
|
width: calc(50% - 2em);
|
|
|
|
input {
|
|
height: 34px;
|
|
}
|
|
}
|
|
}
|
|
}
|