From 4614ac03442aa47166338635b4a044b749828035 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 12 Sep 2014 15:31:24 -0400 Subject: [PATCH] Add more popup examples, remove icons from rating examples --- server/documents/modules/popup.html.eco | 71 ++++++++++++++++---- server/documents/modules/rating.html.eco | 84 ++++-------------------- server/files/javascript/popup.js | 13 +++- server/files/stylesheets/semantic.css | 16 ++--- src/definitions/collections/grid.less | 12 ++-- 5 files changed, 99 insertions(+), 97 deletions(-) diff --git a/server/documents/modules/popup.html.eco b/server/documents/modules/popup.html.eco index 27264fc55..dd3f1fb98 100755 --- a/server/documents/modules/popup.html.eco +++ b/server/documents/modules/popup.html.eco @@ -32,38 +32,87 @@ themes : ['Default']
-

Popup

-

A standard popup

+

Content

+

An element can specify popup content to appear

-

Title

-

A popup can be formatted with a title

+

Title

+

An element can specify popup content with a title

-

HTML

-

A popup can be formatted with html

- +

HTML

+

An element can specify html for a popup

+ +
+
+ +
+
+
My Neighbor Totoro
+
+ Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by Totoros, magical spirits of the forest. When the youngest runs away from home, the older sister seeks help from the spirits to find her. +
+
+
+
+ + Queue +
+
+ + Watch +
+
+
+
+ +
+

Pre-Existing

+

An element can display a pre-existing popup that is include after it

+ +
+
+ +
+
+
Watchmen
+
+
+
+ + Queue +
+
+ + Watch +
+
+
+
+
User Rating
+
+

Variations

-

Width

+

Width

A popup can be extra wide to allow for longer content

-

Fluid

+

Fluid

A fluid popup will take up the entire width of its offset container

Show fluid popup
@@ -77,7 +126,7 @@ themes : ['Default']
-

Size

+

Size

A popup can vary in size

@@ -85,7 +134,7 @@ themes : ['Default']
-

Inverted

+

Inverted

A popup can have its colors inverted

diff --git a/server/documents/modules/rating.html.eco b/server/documents/modules/rating.html.eco index 6ab675def..ac3e94572 100755 --- a/server/documents/modules/rating.html.eco +++ b/server/documents/modules/rating.html.eco @@ -33,9 +33,7 @@ themes : ['Default']

Rating

A basic rating

-
- -
+
@@ -44,26 +42,14 @@ themes : ['Default']
Rating -
- - - - - -
+

Heart

A rating can use a set of heart icons

-
- - - - - -
+

Variations

@@ -71,61 +57,19 @@ themes : ['Default']

Size

A rating can vary in size

-
- - - - - -
+
-
- - - - - -
+
-
- - - - - -
+
-
- - - - - -
+
-
- - - - - -
+
-
- - - - - -
+
-
- - - - - -
+
@@ -221,13 +165,7 @@ themes : ['Default'] ;
-
- - - - - -
+

Behavior

diff --git a/server/files/javascript/popup.js b/server/files/javascript/popup.js index bb2a103ed..83f030d1d 100755 --- a/server/files/javascript/popup.js +++ b/server/files/javascript/popup.js @@ -11,7 +11,6 @@ semantic.popup.ready = function() { ; $popup .popup({ - preserve: true, className: { popup: 'ignored ui popup' } @@ -24,6 +23,18 @@ semantic.popup.ready = function() { }) ; + $('.existing.example .rating') + .rating() + ; + + $('.existing.example .card') + .popup({ + className: { + popup: 'ignored ui popup' + } + }) + ; + }; diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 191a32556..da73ad17a 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -1168,16 +1168,16 @@ body#example.hide { } #example .example:first-child, -#example h2 ~ .example, -#example h3 ~ .example, -#example h4 ~ .example { +#example h2 + .example, +#example h3 + .example, +#example h4 + .example { margin-top: 0px; padding-top: 0px; border-top: none; } -#example h2 ~ .example i.code, -#example h3 ~ .example i.code, -#example h4 ~ .example i.code { +#example h2 + .example i.code, +#example h3 + .example i.code, +#example h4 + .example i.code { top: 0px; } #example .example > h4 { @@ -1188,8 +1188,8 @@ body#example.hide { clear: both; } #example .example { - margin: 1em 0em 1.5em; - padding: 1em 0em; + margin: 2em 0em; + padding: 0em; /* clear: both;*/ position: relative; -webkit-tap-highlight-color: transparent; diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index 64e901978..779e73fc2 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -425,23 +425,27 @@ body > .ui.grid:not(.page) { -----------------------*/ .ui.relaxed.grid > .column:not(.row), -.ui.relaxed.grid > .row > .column { +.ui.relaxed.grid > .row > .column, +.ui.grid > .relaxed.row > .column { padding-left: @relaxedGutterWidth; padding-right: @relaxedGutterWidth; } .ui.very.relaxed.grid > .column:not(.row), -.ui.very.relaxed.grid > .row > .column { +.ui.very.relaxed.grid > .row > .column, +.ui.grid > .very.relaxed.row > .column { padding-left: @veryRelaxedGutterWidth; padding-right: @veryRelaxedGutterWidth; } /* Coupling with UI Divider */ -.ui.relaxed.grid .row + .ui.divider { +.ui.relaxed.grid .row + .ui.divider, +.ui.grid .relaxed.row + .ui.divider { margin-left: @relaxedGutterWidth; margin-right: @relaxedGutterWidth; } -.ui.very.relaxed.grid .row + .ui.divider { +.ui.very.relaxed.grid .row + .ui.divider, +.ui.grid .very.relaxed.row + .ui.divider { margin-left: @veryRelaxedGutterWidth; margin-right: @veryRelaxedGutterWidth; }