attribute): The size of the avatar (xs, s, m, l, xl).
-@param {string} src (attribute): The image source to the avatar.
-@param {string} srcset (atribute): Reponsive support for the image source.
+@param {string} img-src (attribute): The image source to the avatar.
+@param {string} img-srcset (atribute): Reponsive support for the image source.
**/
(function() {
@@ -58,8 +58,8 @@ Use this directive to render an avatar.
templateUrl: 'views/components/umb-avatar.html',
scope: {
size: "@",
- src: "@",
- srcset: "@"
+ imgSrc: "@",
+ imgSrcset: "@"
}
};
diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/package.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/package.resource.js
index dffa116515..9dae2008e2 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/package.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/package.resource.js
@@ -24,13 +24,22 @@ function packageResource($q, $http, umbDataFormatter, umbRequestHelper) {
'Failed to get installed packages');
},
+ validateInstalled: function (name, version) {
+ return umbRequestHelper.resourcePromise(
+ $http.post(
+ umbRequestHelper.getApiUrl(
+ "packageInstallApiBaseUrl",
+ "ValidateInstalled", { name: name, version: version })),
+ 'Failed to validate package ' + name);
+ },
+
deleteCreatedPackage: function (packageId) {
return umbRequestHelper.resourcePromise(
$http.post(
umbRequestHelper.getApiUrl(
"packageInstallApiBaseUrl",
"DeleteCreatedPackage", { packageId: packageId })),
- 'Failed to get installed packages');
+ 'Failed to delete package ' + packageId);
},
uninstall: function(packageId) {
diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/upgrade.html b/src/Umbraco.Web.UI.Client/src/installer/steps/upgrade.html
index 374772451b..5242fa8554 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/steps/upgrade.html
+++ b/src/Umbraco.Web.UI.Client/src/installer/steps/upgrade.html
@@ -3,10 +3,17 @@
Welcome to the Umbraco installer. You see this screen because your Umbraco installation needs a quick upgrade of its database and files, which will ensure your website is kept as fast, secure and up to date as possible.
+ ++ To read a report of changes between your current version {{installer.current.model.currentVersion}} and this version your upgrading to {{installer.current.model.newVersion}} +
++ View Report +
+Simply click continue below to be guided through the rest of the upgrade
-diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 8700bb8f36..3a55e87382 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -120,6 +120,12 @@ @import "components/notifications/umb-notifications.less"; @import "components/umb-file-dropzone.less"; +// Utilities +@import "utilities/_flexbox.less"; +@import "utilities/_spacing.less"; +@import "utilities/_text-align.less"; +@import "utilities/_width.less"; + //page specific styles @import "pages/document-type-editor.less"; @import "pages/login.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less index a272a40c90..2a624b1c56 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less @@ -1,42 +1,15 @@ -// -// Install local package -// +/* + + Install local package + +*/ // Helpers .faded { color: @grayMed; } -.inline-flex { - display: inline-flex; -} -.mt-3 { - margin-top: 30px; -} - -// Upload state - -.umb-upload-local, -.umb-info-local { - display: flex; - justify-content: center; - align-items: center; - text-align: center; -} - -.umb-upload-local form, -.umb-info-local-items { - display: flex; - flex-direction: column; - - justify-content: center; - align-items: center; - - margin: 0; - - max-width: 640px; -} .umb-upload-local__dropzone { position: relative; @@ -75,9 +48,14 @@ font-weight: bold; color: @blue; cursor: pointer; + + &:hover { + text-decoration: underline; + } } + // Accept terms .umb-accept-terms { display: flex; @@ -104,6 +82,7 @@ } + // Info state .umb-info-local-items { border: 2px solid @grayLight; @@ -116,6 +95,8 @@ align-items: center; margin: 0 20px; + + width: 100%; max-width: 540px; } @@ -127,9 +108,6 @@ } } -.umb-info-local-item { - margin-bottom: 20px; -} .umb-info-local-items .umb-package-icon { width: 100%; @@ -148,6 +126,10 @@ padding: 20px 40px; } -.umb-info-local-items .umb-package-installer-label { - margin-left: 10px; +.umb-info-local-item { + margin-bottom: 20px; +} + +.umb-upload-local__dropzone .umb-info-local-item { + margin:20px; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less index 6c8a7156bc..d3af5164f1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less @@ -52,11 +52,55 @@ .umb-package { padding: 10px; box-sizing: border-box; - width: 25%; + flex: 0 0 100%; + max-width: 100%; +} + +@media (min-width: 768px) { + .umb-package { + flex: 0 0 50%; + max-width: 50%; + } +} + +@media (min-width: 1200px) { + .umb-package { + flex: 0 0 33.33%; + max-width: 33.33%; + } +} + +@media (min-width: 1400px) { + .umb-package { + flex: 0 0 25%; + max-width: 25%; + } +} + +@media (min-width: 1700px) { + .umb-package { + flex: 0 0 20%; + max-width: 20%; + } +} + + +@media (min-width: 1900px) { + .umb-package { + flex: 0 0 16.66%; + max-width: 16.66%; + } +} + +@media (min-width: 2200px) { + .umb-package { + flex: 0 0 14.28%; + max-width: 14.28%; + } } .umb-package-link { - display: flex; + display: block; flex-wrap: wrap; flex-direction: column; justify-content: center; @@ -104,6 +148,7 @@ .umb-package-icon img { max-width: 70px; + width: 70px; height: auto; } @@ -304,6 +349,48 @@ padding: 10px 0; } + +@media (max-width: 768px) { + .umb-packages-category { + width: 100%; + margin-top: 0; + margin-bottom: 15px !important; + margin-left: 0 !important; + margin-right: 0 !important; + } +} + +@media (max-width: 992px) { + .umb-packages-category { + border: 1px solid @grayLight; + margin: 5px; + flex: 0 0 auto; + + text-align: center; + padding: 10px; + + max-width: 100%; + + border-radius: 3px; + } +} + +@media (min-width: 1100px) and (max-width: 1300px) { + .umb-packages-category { + border: 1px solid @grayLight; + margin: 5px; + flex: 0 0 auto; + + text-align: center; + padding: 10px; + + max-width: 100%; + + border-radius: 3px; + } +} + + .umb-packages-category:hover, .umb-packages-category.-active { text-decoration: none; @@ -312,12 +399,14 @@ .umb-packages-category.-first { border-left: 1px solid @grayLight; - border-radius: 3px 0 0 3px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } .umb-packages-category.-last { border-right: 1px solid @grayLight; - border-radius: 0 3px 3px 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } /* PACKAGE DETAILS */ @@ -326,19 +415,24 @@ display: flex; } -.umb-package-details__back-link { +a.umb-package-details__back-link { font-weight: bold; - color: @grayMed; + color: @black; } .umb-package-details__back-link:hover { - color: @black; + color: @grayMed; text-decoration: none; } + +@sidebarwidthFlax: 350px; // Width of sidebar. Ugly hack because of old version of Less + .umb-package-details__main-content { flex: 1 1 auto; margin-right: 40px; + + width: ~"calc(100% - @{sidebarwidthFlax})"; // Make sure that the main content area doesn't gets affected by inline styling } .umb-package-details__sidebar { @@ -367,15 +461,17 @@ } .umb-package-details__information-item { - display: flex; - margin-bottom: 5px; + margin-bottom: 10px; font-size: 13px; } .umb-package-details__information-item-label { color: black; font-weight: bold; - margin-right: 3px; +} + +.umb-package-details__information-item-content { + word-break: break-word; } .umb-package-details__information-item-label-2 { @@ -440,12 +536,13 @@ } .umb-gallery__thumbnail { - flex: 1 1 100px; + flex: 0 1 100px; border: 1px solid @grayLight; border-radius: 3px; margin: 5px; padding: 10px; box-sizing: border-box; + max-width: 100px; } .umb-gallery__thumbnail:hover { diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/_flexbox.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_flexbox.less new file mode 100644 index 0000000000..829aba08f7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/_flexbox.less @@ -0,0 +1,43 @@ +/* + Flexbox +*/ + + +.flex { display: flex } + +.flex-column { flex-direction: column } +.flex-wrap { flex-wrap: wrap } + +.items-start { align-items: flex-start } +.items-end { align-items: flex-end } +.items-center { align-items: center } +.items-baseline { align-items: baseline } +.items-stretch { align-items: stretch } + +.self-start { align-self: flex-start } +.self-end { align-self: flex-end } +.self-center { align-self: center } +.self-baseline { align-self: baseline } +.self-stretch { align-self: stretch } + +.justify-start { justify-content: flex-start } +.justify-end { justify-content: flex-end } +.justify-center { justify-content: center } +.justify-between { justify-content: space-between } +.justify-around { justify-content: space-around } + +.content-start { align-content: flex-start } +.content-end { align-content: flex-end } +.content-center { align-content: center } +.content-between { align-content: space-between } +.content-around { align-content: space-around } +.content-stretch { align-content: stretch } + +/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */ +.flex-auto { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ +} + +.flex-none { flex: none } diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less new file mode 100644 index 0000000000..64d86d7b6f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less @@ -0,0 +1,54 @@ +/* + + Spacing + +*/ + +@spacing-none: 0; +@spacing-extra-small: .25rem; +@spacing-small: .5rem; +@spacing-medium: 1rem; +@spacing-large: 2rem; +@spacing-extra-large: 4rem; +@spacing-extra-extra-large: 8rem; +@spacing-extra-extra-extra-large: 16rem; + +/* + SPACING + An eight step powers of two scale ranging from 0 to 16rem. + Namespaces are composable and thus highly grockable - check the legend below + Legend: + p = padding + m = margin + a = all + h = horizontal + v = vertical + t = top + r = right + b = bottom + l = left + 0 = none + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale +*/ + + +.m-center { + margin-left: auto; + margin-right: auto; +} + + +.mt0 { margin-top: @spacing-none; } +.mt1 { margin-top: @spacing-extra-small; } +.mt2 { margin-top: @spacing-small; } +.mt3 { margin-top: @spacing-medium; } +.mt4 { margin-top: @spacing-large; } +.mt5 { margin-top: @spacing-extra-large; } +.mt6 { margin-top: @spacing-extra-extra-large; } +.mt7 { margin-top: @spacing-extra-extra-extra-large; } diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/_text-align.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_text-align.less new file mode 100644 index 0000000000..beff81d80c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/_text-align.less @@ -0,0 +1,7 @@ +/* + TEXT ALIGN +*/ + +.tl { text-align: left; } +.tr { text-align: right; } +.tc { text-align: center; } diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/_width.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_width.less new file mode 100644 index 0000000000..a9f2fd3362 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/utilities/_width.less @@ -0,0 +1,26 @@ +/* + Width +*/ + + +/* Width Scale */ + +.w1 { width: 1rem; } +.w2 { width: 2rem; } +.w3 { width: 4rem; } +.w4 { width: 8rem; } +.w5 { width: 16rem; } + +.w-10 { width: 10%; } +.w-20 { width: 20%; } +.w-25 { width: 25%; } +.w-33 { width: 33%; } +.w-34 { width: 34%; } +.w-40 { width: 40%; } +.w-50 { width: 50%; } +.w-60 { width: 60%; } +.w-75 { width: 75%; } +.w-80 { width: 80%; } +.w-100 { width: 100%; } + +.w-auto { width: auto; } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html index 43af692d3a..e4fde787da 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html @@ -5,8 +5,8 @@
The health checker evaluates various areas of your site for best practice settings, configuration, potential problems, etc. You can easily fix problems by pressing a button.
You can add your own health checks, have a look at the documentation for more information about custom health checks.