summaryrefslogtreecommitdiffstats
path: root/settings/css
diff options
context:
space:
mode:
authorMorris Jobke <hey@morrisjobke.de>2018-06-06 18:05:04 +0200
committerGitHub <noreply@github.com>2018-06-06 18:05:04 +0200
commitb49f8e43bd9077ec79547a67a09e33981713b697 (patch)
treebdece8f300cb15157ee6c4ca143836aa18517f0b /settings/css
parent55d0f355766da0896882268db8b291ada2bbd2b9 (diff)
parentbf03d43c2f65feffe96c60000a4d127411080762 (diff)
downloadnextcloud-server-b49f8e43bd9077ec79547a67a09e33981713b697.tar.gz
nextcloud-server-b49f8e43bd9077ec79547a67a09e33981713b697.zip
Merge pull request #9565 from nextcloud/feature/noid/app-settings
Migrate apps management to Vue.js
Diffstat (limited to 'settings/css')
-rw-r--r--settings/css/settings.scss174
1 files changed, 122 insertions, 52 deletions
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 6adac7704cd..27269b23848 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -756,38 +756,118 @@ span.version {
opacity: .5;
}
-@media (min-width: 1601px) {
- #apps-list .section {
- width: 22%;
- box-sizing: border-box;
- &:nth-child(4n) {
- margin-right: 20px;
- }
+.app-settings-content {
+ #searchresults {
+ display: none;
+ }
+}
+#apps-list.store {
+ .section {
+ border: 0;
+ }
+ .app-name {
+ display: block;
+ margin: 5px 0;
+ }
+ .app-name, .app-image * {
+ cursor: pointer;
+ }
+ .app-summary {
+ opacity: .7;
+ }
+ .app-image-icon .icon-settings-dark {
+ width: 100%;
+ height: 150px;
+ background-size: 45px;
+ opacity: 0.5;
+ }
+ .app-score-image {
+ height: 14px;
+ }
+ .actions {
+ margin-top: 10px;
}
}
-@media (min-width: 1201px) and (max-width: 1600px) {
- #apps-list .section {
- width: 30%;
- box-sizing: border-box;
- &:nth-child(3n) {
- margin-right: 20px;
+#app-sidebar #app-details-view {
+ h2 {
+ .icon-settings-dark,
+ svg {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ margin-right: 10px;
+ opacity: .7;
}
}
+ .app-level {
+ margin-bottom: 10px;
+ }
+ .app-author, .app-licence {
+ color: $color-text-details;
+ }
+ .app-dependencies {
+ margin: 10px 0;
+ }
+ .app-description p {
+ margin: 10px 0;
+ }
+ .close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 14px;
+ opacity: 0.5;
+ z-index: 1;
+ }.
+ .actions {
+ display: flex;
+ }
}
-@media (min-width: 901px) and (max-width: 1200px), (min-width: 601px) and (max-width: 770px) {
- #apps-list .section {
- width: 40%;
- box-sizing: border-box;
- &:nth-child(2n) {
- margin-right: 20px;
- }
+@media only screen and (min-width: 1601px) {
+ .store .section {
+ width: 25%;
+ }
+ .with-app-sidebar .store .section {
+ width: 33%;
+ }
+}
+
+@media only screen and (max-width: 1600px) {
+ .store .section {
+ width: 25%;
+ }
+ .with-app-sidebar .store .section {
+ width: 33%;
+ }
+}
+
+@media only screen and (max-width: 1400px) {
+ .store .section {
+ width: 33%;
+ }
+ .with-app-sidebar .store .section {
+ width: 50%;
+ }
+}
+
+@media only screen and (max-width: 900px) {
+ .store .section {
+ width: 50%;
+ }
+ .with-app-sidebar .store .section {
+ width: 100%;
}
}
-/* hide app version and level on narrower screens */
@media only screen and (max-width: 768px) {
+ .store .section {
+ width: 50%;
+ }
+}
+/* hide app version and level on narrower screens */
+@media only screen and (max-width: 900px) {
#apps-list.installed {
.app-version, .app-level {
display: none !important;
@@ -795,7 +875,7 @@ span.version {
}
}
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 500px) {
#apps-list.installed .app-groups {
display: none !important;
}
@@ -877,30 +957,15 @@ span.version {
list-style-position: inside;
}
-/* Transition to complete width! */
-
-.app {
- &:hover, &:active {
- max-width: inherit;
- }
-}
-
.appslink {
text-decoration: underline;
}
-.score {
- color: #666;
- font-weight: bold;
- font-size: 0.8em;
-}
-.appinfo .documentation {
- margin-top: 1em;
- margin-bottom: 1em;
-}
-
-#apps-list {
+#apps-list, #apps-list-search {
+ .section {
+ cursor: pointer;
+ }
&.installed {
display: table;
width: 100%;
@@ -919,6 +984,9 @@ span.version {
padding: 6px;
box-sizing: border-box;
}
+ &.selected {
+ background-color: nc-darken($color-main-background, 3%);
+ }
}
.groups-enable {
margin-top: 0;
@@ -931,11 +999,22 @@ span.version {
height: auto;
text-align: right;
}
- .app-image-icon svg {
+ .app-image-icon svg,
+ .app-image-icon .icon-settings-dark {
margin-top: 5px;
width: 20px;
height: 20px;
opacity: .5;
+ background-size: cover;
+ display: inline-block;
+ }
+ .actions {
+ text-align: right;
+ .icon-loading-small {
+ display: inline-block;
+ top: 4px;
+ margin-right: 10px;
+ }
}
}
&:not(.installed) .app-image-icon svg {
@@ -946,8 +1025,6 @@ span.version {
height: 64px;
opacity: .1;
}
- position: relative;
- height: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
@@ -957,10 +1034,7 @@ span.version {
.section {
position: relative;
flex: 0 0 auto;
- margin-left: 20px;
- &.apps-experimental {
- flex-basis: 90%;
- }
+
h2.app-name {
display: block;
margin: 8px 0;
@@ -1016,10 +1090,6 @@ span.version {
}
}
-.installed .actions {
- text-align: right;
-}
-
/* LOG */
#log {
white-space: normal;