[web] fixes for small bugs on website

* change precision of SASS build to match Angular CLI * fix basic select text which talked about inputs * remove link to old grid in grid docs * remove success app-level alert in docs closes vmware-archive#3074 closes vmware-archive#3071 closes vmware-archive#3070 closes vmware-archive#3030 Signed-off-by: Jeremy Wilken <[email protected]>
jacobbutton · Feb 5, 2019 · af37019 · af37019
1 parent ccbfa2f
commit af37019
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -4,13 +4,13 @@
   "private": true,
   "scripts": {
     "build:icons:web": "webpack --config webpack.icons.config.js",
-    "build:icons:css": "node-sass --source-map=true --precision=6 ./src/clr-icons/clr-icons.scss ./dist/clr-icons/clr-icons.css",
+    "build:icons:css": "node-sass --source-map=true --precision=8 ./src/clr-icons/clr-icons.scss ./dist/clr-icons/clr-icons.css",
     "build:icons:optimize": "csso ./dist/clr-icons/clr-icons.css ./dist/clr-icons/clr-icons.min.css --map file;",
     "build:icons:package": "cpy ./npm/clr-icons/package.json ./npm/clr-icons/README.md ./dist/clr-icons/; replace '@VERSION' $npm_package_version ./dist/clr-icons/package.json",
     "build:icons:svg": "node ./scripts/clr-icons-svg.js",
     "build:icons": "npm-run-all build:icons:css build:icons:optimize build:icons:web build:icons:package build:icons:svg",
-    "build:ui:css": "node-sass --include-path=node_modules --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/main.scss ./dist/clr-ui/clr-ui.css; node-sass --include-path=node_modules --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/dark-theme.scss ./dist/clr-ui/clr-ui-dark.css",
-    "build:ui:deprecated": "node-sass --include-path=node_modules --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/layout/grid-deprecated.clarity.scss ./dist/clr-ui/clr-grid-deprecated.css",
+    "build:ui:css": "node-sass --include-path=node_modules --source-map=true --precision=8 --indentedSyntax=true ./src/clr-angular/main.scss ./dist/clr-ui/clr-ui.css; node-sass --include-path=node_modules --source-map=true --precision=8 --indentedSyntax=true ./src/clr-angular/dark-theme.scss ./dist/clr-ui/clr-ui-dark.css",
+    "build:ui:deprecated": "node-sass --include-path=node_modules --source-map=true --precision=8 --indentedSyntax=true ./src/clr-angular/layout/grid-deprecated.clarity.scss ./dist/clr-ui/clr-grid-deprecated.css",
     "build:ui:prefix": "postcss ./dist/clr-ui/clr-ui.css -o ./dist/clr-ui/clr-ui.css; postcss ./dist/clr-ui/clr-ui-dark.css -o ./dist/clr-ui/clr-ui-dark.css; postcss --use autoprefixer -o ./dist/clr-ui/clr-grid-deprecated.css ./dist/clr-ui/clr-grid-deprecated.css",
     "build:ui:src": "cpy --parents --cwd='src/clr-angular/' '**/*.scss' ../../dist/clr-ui/src/",
     "build:ui:optimize": "csso ./dist/clr-ui/clr-ui.css ./dist/clr-ui/clr-ui.min.css --map file; csso ./dist/clr-ui/clr-ui-dark.css ./dist/clr-ui/clr-ui-dark.min.css --map file; csso ./dist/clr-ui/clr-grid-deprecated.css ./dist/clr-ui/clr-grid-deprecated.css --map file",

diff --git a/src/website/src/app/documentation/demos/alert/alerts.demo.html b/src/website/src/app/documentation/demos/alert/alerts.demo.html
@@ -62,15 +62,6 @@ <h6>Standard Alerts</h6>
                     <div class="clrweb-DoxMedia">
                         <div class="clrweb-DoxMedia-block">
                             <div class="clrweb-DoxMedia-img app-alert-box">
-                                <clr-alert clrAlertType="success" [clrAlertAppLevel]="true"
-                                    [clrAlertClosable]="false">
-                                    <clr-alert-item>
-                                        <span class="alert-text">
-                                            Your container has been created.
-                                        </span>
-                                    </clr-alert-item>
-                                </clr-alert>
-
                                 <clr-alert clrAlertType="info" [clrAlertAppLevel]="true"
                                     [clrAlertClosable]="false">
                                     <clr-alert-item>
@@ -97,6 +88,17 @@ <h6>Standard Alerts</h6>
                                         </span>
                                     </clr-alert-item>
                                 </clr-alert>
+
+                                <!-- This is a silly hack to keep the height of the boxes nearly equal in most cases but 
+                                we don't really support success app level so this must go. -->
+                                <clr-alert clrAlertType="success" [clrAlertAppLevel]="true"
+                                    [clrAlertClosable]="false" style="visibility: hidden">
+                                    <clr-alert-item>
+                                        <span class="alert-text">
+                                            Your container has been created.
+                                        </span>
+                                    </clr-alert-item>
+                                </clr-alert>
                             </div>
                         </div>
                         <div class="clrweb-DoxMedia-text">
@@ -413,16 +415,6 @@ <h3 id="examples">Code &amp; Examples</h3>
 
             <p id="alert-classes">Several classes and elements are required to implement the Clarity alert layout. A table of these classes and elements with a brief description of each follows:</p>
 
-            <clr-alert clrAlertType="danger" [clrAlertClosable]="false">
-                <clr-alert-item>
-                    <div class="alert-text">
-                        <div style="margin-bottom: 8px">The use of <code class="clr-code">.alert-item</code> in the <code class="clr-code">clr-alert</code> Angular component is deprecated. Try to use <code class="clr-code">clr-alert-item</code> instead.</div>
-                        <div style="margin-bottom: 8px">If your application uses a combination of <code class="clr-code">clr-alert</code> Angular components and hand-coded DOM alerts, you should put the <code class="clr-code">.static</code> class on your non-Angular <code class="clr-code">.alert-item</code>  elements.</div>
-                        <div>Once <code class="clr-code">clr-alert</code> no longer recognizes <code class="clr-code">.alert-item</code> classnames as a subcomponent, it will no longer be an issue.</div>
-                    </div>
-                </clr-alert-item>
-            </clr-alert>
-
             <table class="table table-vertical">
                 <tbody>
                     <tr>

diff --git a/src/website/src/app/documentation/demos/grid/grid.demo.html b/src/website/src/app/documentation/demos/grid/grid.demo.html
@@ -5,26 +5,13 @@
             A grid provides a structure of rows and columns for aligning content. Grids are useful because they help
             create a familiar and easily navigable structure for content.</h5>
 
-        <div class="alert alert-info">
-            <div class="alert-items">
-                <div class="alert-item static">
-                    <div class="alert-icon-wrapper">
-                        <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
-                    </div>
-                    <span class="alert-text">
-                        The grid documentation here describes the new grid introduced in version 0.12. The old grid is still available, but deprecated for removal in version 2.0. To see the old grid documentation, go to <a href="/clarity/documentation/v0.11/grid/">0.11 grid documentation</a>.
-                    </span>
-                </div>
-            </div>
-        </div>
-
         <div id="code-examples">
             <p>
-                Clarity imports the 12-column
+                Clarity extends the 12-column
                 <a href="https://getbootstrap.com/docs/4.1/layout/grid/" target="_blank">
                     Bootstrap 4 Flex Grid
                 </a>
-                and prefixes the grid classes.
+                and prefixes the grid classes with <code class="clr-code">clr-</code>.
                 Prefixing allows us to avoid conflicting with other grid systems.
                 However, it also means if you are familiar with the grid classes
                 in Bootstrap 4, the Clarity grid will be familiar.
@@ -34,8 +21,8 @@
                 Important features about the grid are listed below:
             </p>
 
-            <div class="row">
-                <div class="col-xs-12">
+            <div class="clr-row">
+                <div class="clr-col-12">
                     <table class="table hidden-xs-down">
                         <thead>
                         <tr>

diff --git a/src/website/src/app/documentation/demos/select/select.demo.html b/src/website/src/app/documentation/demos/select/select.demo.html
@@ -13,11 +13,9 @@ <h2 id="forms-code-samples">Angular Select Component</h2>
 
         <h4>Basic select</h4>
 
-        <p>This is the most basic way to create an input inside of a form. This is only if you don't have a need for a
-            label or validation. You need to add <code class="clr-code">clrInput</code> to your input to wire up the
-            directive. Notice, it is not necessary to add <code class="clr-code">type="text"</code> as it is handled
-            automatically. It will only work if you have the control wired up with either a template driven form or
-            reactive form.</p>
+        <p>This is the standard way to define a select box inside of a form, without the use of a
+            label or validation. You need to add <code class="clr-code">clrSelect</code> to your select to wire up the
+            directive.</p>
 
         <p></p>