mirror of
https://github.com/discourse/discourse.git
synced 2024-11-29 01:24:34 +08:00
2e3b3ec2de
Installing multiple copies of the same theme/component is possible, but you rarely need to actually have multiple copies installed. We've seen many times new admins installing duplicates of components because they were unaware it was already installed. This PR makes the theme installer modal loop through the existing themes when you click on 'install', and if there is a theme with a URL that matches the URL you entered, a warning will show up and you will need to click 'install' again to proceed.
133 lines
2.2 KiB
SCSS
133 lines
2.2 KiB
SCSS
.admin-install-theme-modal {
|
|
.modal-inner-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.install-theme {
|
|
display: flex;
|
|
@include breakpoint(mobile-extra-large) {
|
|
.install-theme-items {
|
|
flex: 0 0 150px;
|
|
}
|
|
.install-theme-content {
|
|
flex: 1 1 100%;
|
|
}
|
|
.select-kit {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.install-theme-items {
|
|
width: 200px;
|
|
}
|
|
|
|
.install-theme-item {
|
|
border: 1px solid var(--primary-low);
|
|
border-bottom: none;
|
|
position: relative;
|
|
|
|
&:last-child {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
}
|
|
|
|
input,
|
|
.d-icon-caret-right {
|
|
display: none;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
padding: 10px 30px 10px 10px;
|
|
margin-bottom: 0px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input:checked + label {
|
|
color: var(--secondary);
|
|
background-color: var(--tertiary);
|
|
+ .d-icon {
|
|
display: block;
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
.d-icon-caret-right {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 50%;
|
|
margin-top: -7px;
|
|
}
|
|
}
|
|
|
|
.install-theme-content {
|
|
padding: 0px 0px 10px 20px;
|
|
width: calc(100% - 200px);
|
|
input[type="file"] {
|
|
width: 100%;
|
|
overflow: hidden; // Chrome needs this
|
|
}
|
|
}
|
|
|
|
.repo {
|
|
input[type="text"] {
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
.popular-theme-items {
|
|
height: 65vh;
|
|
overflow: auto;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.popular-theme-item {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
padding: 8px 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
.popular-theme-name {
|
|
flex: 1;
|
|
.popular-theme-type {
|
|
font-weight: normal;
|
|
font-size: $font-down-2;
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-very-high);
|
|
font-weight: bold;
|
|
&:hover,
|
|
&:visited,
|
|
&:active {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
|
|
.popular-theme-description {
|
|
font-size: $font-down-1;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
.popular-theme-buttons {
|
|
> span {
|
|
font-style: italic;
|
|
font-size: $font-down-1;
|
|
color: var(--primary-medium);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
> a {
|
|
display: block;
|
|
font-size: $font-down-2;
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.install-theme-warning {
|
|
margin-bottom: 10px;
|
|
}
|