From 9cb593f5bce705b6cf54a62f86409d04eab697ed Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 11 Jun 2015 16:07:35 -0400 Subject: [PATCH] Style updates --- server/documents/behaviors/api.html.eco | 12 +- .../documents/behaviors/visibility.html.eco | 17 +- .../documents/collections/breadcrumb.html.eco | 6 +- server/documents/introduction/new.html.eco | 173 +++++++++++++++--- server/documents/modules/sticky.html.eco | 67 ++++++- server/documents/views/card.html.eco | 27 ++- server/files/javascript/intro.js | 61 ++++++ server/files/javascript/sticky.js | 6 +- server/files/stylesheets/docs.css | 62 ++++++- 9 files changed, 374 insertions(+), 57 deletions(-) diff --git a/server/documents/behaviors/api.html.eco b/server/documents/behaviors/api.html.eco index 86dbaee81..1720075c4 100755 --- a/server/documents/behaviors/api.html.eco +++ b/server/documents/behaviors/api.html.eco @@ -930,6 +930,12 @@ type : 'UI Behavior' Variables to use for replacement + + encodeUrlData + true + Where url data should be encoded with encodeURIComponent before being added to URL. + + mockResponse false @@ -997,7 +1003,7 @@ type : 'UI Behavior' onSuccess(response, element) state context - Callback on response object that passed successTest + Callback after successful response, JSON response must pass successTest onComplete(response, element) @@ -1007,7 +1013,7 @@ type : 'UI Behavior' onFailure(response, element) state context - Callback on response object that fails successTest + Callback on failed response, or JSON response that fails successTest onError(errorMessage, element) @@ -1017,7 +1023,7 @@ type : 'UI Behavior' onAbort(errorMessage, element) state context - Callback on abort caused by user clicking a link or manually cancelling request + Callback on abort caused by user clicking a link or manually cancelling request. diff --git a/server/documents/behaviors/visibility.html.eco b/server/documents/behaviors/visibility.html.eco index 20f798b1b..9f450c592 100644 --- a/server/documents/behaviors/visibility.html.eco +++ b/server/documents/behaviors/visibility.html.eco @@ -649,11 +649,7 @@ type : 'UI Behavior' transition: all 0.5s ease; background: transparent; } - .visibility.example .fixed.overlay + .placeholder { - display: none; - } - - /* fixed */ + /* change style */ .visibility.example .fixed.overlay { position: fixed; padding: 1em; @@ -670,28 +666,17 @@ type : 'UI Behavior' Option 3 -
-
-
-
-
-
-
-
-
-
-
diff --git a/server/documents/collections/breadcrumb.html.eco b/server/documents/collections/breadcrumb.html.eco index 815c27f46..38f42b22e 100755 --- a/server/documents/collections/breadcrumb.html.eco +++ b/server/documents/collections/breadcrumb.html.eco @@ -36,11 +36,11 @@ themes : ['Default']
-
+
Home - + Store - +
T-Shirt
diff --git a/server/documents/introduction/new.html.eco b/server/documents/introduction/new.html.eco index 31e708ae7..8054ecc0f 100644 --- a/server/documents/introduction/new.html.eco +++ b/server/documents/introduction/new.html.eco @@ -59,8 +59,8 @@ type : 'Introduction'
-

Evenly Divided

-

The new equal width grid variation adjusts column widths automatically to split their container evenly without having to specify a column count.

+

Automatic Columns

+

The new equal width grid variation adjusts column widths automatically to split their container evenly without having to manually specify a column count.

@@ -119,7 +119,8 @@ type : 'Introduction'

Multiple Selection

Multiple select dropdowns are now available, and can generate automatically from standard html selects.

-

Dropdowns all now support advanced keyboard shortcuts like pagedown, delete, shift+left ctrl+click, and selection using first letter of item.

+

Dropdowns now all support advanced keyboard shortcuts like pagedown, delete, shift+left ctrl+click, and selection using first letter of item.

+

Additionally dropdowns will now automatically open upward if there is not enough space available in the viewport below a dropdown.

@@ -127,7 +128,7 @@ type : 'Introduction'

User Tagging

-

All dropdowns, single and multiple now support user tagging. Values can be automatically tokenized in a hidden input, or using a select

+

All dropdowns, single and multiple now support user tagging. Values can be automatically separated by a delimiter and placed in a hidden input, or extend an existing select element.

$('.ui.dropdown') .dropdown({ @@ -147,7 +148,7 @@ type : 'Introduction'

Remote Data

-

All dropdowns now support loading remote data. Selected name value pairs retrieved remotely are stored in sessionStorage to make sure they appear just as retrieved on page refresh.

+

All dropdowns now support loading remote data. Selected name value pairs retrieved remotely are stored in sessionStorage so that selected values are repopulated correctly even after a page refresh.

// somewhere in app $.api.settings.api = { @@ -184,6 +185,7 @@ type : 'Introduction'
+

Nested Menus

Nested scrolling menus are now supported. These menus support all the same keyboard shortcuts and filtering as regular menus.

@@ -243,10 +245,15 @@ type : 'Introduction'

Dropdowns support many, many new features, including:

  • Maximum selection count is supported for multiple selects
    • -
  • Dropdowns will now automatically change direction to open upward if no space is left on the screen
  • Mutation observers will now watch for changes in menus or the elements they are generated from and will update choices automatically
  • Elements in all dropdowns can now be "jumped to" by pressing the first letter of the choice
    • -
  • Keyboard shortcuts now include power user shortcuts, shift+select for multiple shift+right, page down and page up and many more.
    • +
  • Keyboard shortcuts now include power user shortcuts +
      +
    • ctrl+click will add a single additional selected label
      • +
    • shift+right will extend selection
      • +
    • page down and page up will select first element in next page
      • +
    • a-z will select value matching first letter
      • +
  • Custom error messages are now supported with search selects
@@ -370,6 +377,88 @@ type : 'Introduction'

API

+ +
+

Local Caching

+

API now supports sessionStorage caching. Using this setting will instantly return results for the same url across a user's session.

+

Try refreshing the page and searching the same letter, results will appear instantly without a server roundtrip.

+
+ $('.ui.dropdown') + .dropdown({ + apiSettings: { + cache : 'local', + url: '//api.semantic-ui.com/tags/{query}' + } + }) + ; +
+
+
+ +
+ + + +
Select one...
+
+
+
+
+ + +
+

Translates Any API

+

API now lets you adjust a server's JSON response using a new callback, onResponse. This can let you restructure third party APIs to match your local data requirements.

+
+ $('.ui.search') + .search({ + type : 'category', + minCharacters : 3, + apiSettings : { + onResponse: function(githubResponse) { + var + response = { + results : {} + } + ; + // translate github api response to work with search + $.each(githubResponse.items, function(index, item) { + var + language = item.language || 'Unknown', + maxResults = 8 + ; + if(index >= maxResults) { + return false; + } + // Create new language category + if(response.results[language] === undefined) { + response.results[language] = { + name : language, + results : [] + }; + } + // Add result to category + response.results[language].results.push({ + title : item.name, + description : item.description, + url : item.html_url + }); + }); + return response; + }, + url: '//api.github.com/search/repositories?q={query}' + } + }) +
+ +
+
+ + +
+
+
+

Mocked Responses

API now supports mocked responses, letting you specify how responses are returned in advance.

@@ -425,30 +514,58 @@ type : 'Introduction'
-
-

Local Caching

-

API now supports sessionStorage caching. Using this setting will instantly return results for the same url across a user's session.

-

Try refreshing the page and searching the same letter, results will appear instantly without a server roundtrip.

-
- $('.ui.dropdown') - .dropdown({ - apiSettings: { - cache : 'local', - url: '//api.semantic-ui.com/tags/{query}' - } - }) - ; + +

Visibility

+ +
+ +

Simple Sticky

+ +

Visibility APIs now include useful shortcuts for sticky content. A placeholder will automatically be added when an element is passed making sure other content does not adjust position.

+ +

Additionally visibility and sticky have been rewritten to use a pub/sub pattern which is much more performant than 1.0

+ +
+ $('.overlay') + .visibility({ + type : 'fixed', + offset : 15 // give some space from top of screen + }) + ;
-
-
- -
- - - -
Select one...
+
+ .overlay { + background-color: #FFFFFF; + padding: 0.5em; + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); + transition: all 0.5s ease; + background: transparent; + } + /* change style */ + .fixed.overlay { + position: fixed; + padding: 1em; + box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); + } +
+
+
+
+ + Menu + + Option 1 + Option 2 + Option 3
+
+ + + + + +
\ No newline at end of file diff --git a/server/documents/modules/sticky.html.eco b/server/documents/modules/sticky.html.eco index 4e4405a3d..333a2409f 100755 --- a/server/documents/modules/sticky.html.eco +++ b/server/documents/modules/sticky.html.eco @@ -126,7 +126,6 @@ type : 'UI Module'
-

Long Stuck Content

@@ -207,6 +206,72 @@ type : 'UI Module'
+
+
+ +
+
+ Followup Article +
+ By Author +
+
+
+
+
+ +
+
+ Followup Article +
+ By Author +
+
+
+
+
+ +
+
+ Followup Article +
+ By Author +
+
+
+
+
+ +
+
+ Followup Article +
+ By Author +
+
+
+
+
+ +
+
+ Followup Article +
+ By Author +
+
+
+
+
+ +
+
+ Followup Article +
+ By Author +
+
+
diff --git a/server/documents/views/card.html.eco b/server/documents/views/card.html.eco index 1bd5af867..0419602c3 100755 --- a/server/documents/views/card.html.eco +++ b/server/documents/views/card.html.eco @@ -10,7 +10,7 @@ title : 'Card' description : 'A card displays site content in a manner similar to a playing card' type : 'UI View' -themes : ['Default', 'Basic', 'Classic'] +themes : ['Default', 'Basic', 'Classic', 'Instagram'] --- <%- @partial('header') %> @@ -46,6 +46,31 @@ themes : ['Default', 'Basic', 'Classic']
+
+
+
+
14h
+ Elliot +
+
+ +
+
+ + + 17 likes + + + 3 comments +
+
+
+ + +
+
+
+

Cards

diff --git a/server/files/javascript/intro.js b/server/files/javascript/intro.js index d5e8caf93..ce7dbcbd4 100644 --- a/server/files/javascript/intro.js +++ b/server/files/javascript/intro.js @@ -57,6 +57,67 @@ semantic.intro.ready = function() { } }) ; + $('.external.example .ui.search') + .search({ + type : 'category', + minCharacters : 3, + apiSettings : { + onFailure: function() { + $(this).search('display message', 'Hold off a few minutes
GitHub rate limit exceeded for anonymous search.'); + }, + onResponse: function(githubResponse) { + var + response = { + results : {} + } + ; + if(githubResponse.items.length === 0) { + // no results + return response; + } + $.each(githubResponse.items, function(index, item) { + var + language = item.language || 'Unknown', + maxLength = 200, + description + ; + if(index >= 8) { + // only show 8 results + return false; + } + // Create new language category + if(response.results[language] === undefined) { + response.results[language] = { + name : language, + results : [] + }; + } + description = (item.description < maxLength) + ? item.description + : item.description.substr(0, maxLength) + '...' + ; + description = $.fn.search.settings.templates.escape(description); + // Add result to category + response.results[language].results.push({ + title : item.name, + description : description, + url : item.html_url + }); + }); + return response; + }, + url: '//api.github.com/search/repositories?q={query}' + } + }) + ; + + // visiblity + $('.visibility.example .overlay') + .visibility({ + type : 'fixed', + offset : 15 // give some space from top of screen + }) + ; // menu diff --git a/server/files/javascript/sticky.js b/server/files/javascript/sticky.js index bc23790d1..8108c1b44 100644 --- a/server/files/javascript/sticky.js +++ b/server/files/javascript/sticky.js @@ -24,7 +24,7 @@ semantic.sticky.ready = function() { $sticky .sticky({ context: $context, - offset: 50, + offset: 15, pushing: true }) ; @@ -41,7 +41,7 @@ semantic.sticky.ready = function() { $inlineSticky .sticky({ context: $context, - offset: 39 + offset: 15 }) ; } @@ -57,7 +57,7 @@ semantic.sticky.ready = function() { $sticky .sticky({ context: $context, - offset: 75 + offset: 15 }) ; }) diff --git a/server/files/stylesheets/docs.css b/server/files/stylesheets/docs.css index 64a2c3afc..fcab630cc 100755 --- a/server/files/stylesheets/docs.css +++ b/server/files/stylesheets/docs.css @@ -68,9 +68,10 @@ code { border-radius: 3px; display: inline-block; font-family: "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace; - font-size: 0.85714em; + font-size: 0.875em; font-weight: bold; - padding: 0px 5px; + margin-top: -3px; + padding: 3px 6px; vertical-align: baseline; } pre code { @@ -430,6 +431,63 @@ pre code { color: rgba(0, 0, 0, 0.8); } +/* Link Styles */ +#example .main.container > p a, +#example .main.container > .tab > p a, +#example .main.container .example > .ignored a, +#example .main.container .example > p a { + display: inline-block; + position: relative; + overflow: hidden; + vertical-align: top; + z-index: 2; + -webkit-transition: color 0.2s; + transition: color 0.2s; +} +#example .main.container > p a > code, +#example .main.container > .tab > p a > code, +#example .main.container .example > .ignored a > code, +#example .main.container .example > p a > code { + background-color: rgba(0, 50, 100, 0.08); +} +#example .main.container > p a:before, +#example .main.container > .tab > p a:before, +#example .main.container .example > .ignored a:before, +#example .main.container .example > p a:before { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + background-color: #4183C4; + content: ''; + -webkit-transition: all 0.2s; + transition: all 0.2s; + -webkit-transform: translateY(95%) scaleX(0); + transform: translateY(95%) scaleX(0); +} + +/* Hover */ +#example .main.container > p a:hover > code, +#example .main.container > .tab > p a:hover > code, +#example .main.container .example > .ignored a:hover > code, +#example .main.container .example > p a:hover > code { + background-color: rgba(0, 50, 100, 0.12); +} +#example .main.container > p a:hover:before, +#example .main.container > p a:focus:before, +#example .main.container > .tab > p a:hover:before, +#example .main.container > .tab > p a:focus:before, +#example .main.container .example > .ignored a:hover:before, +#example .main.container .example > .ignored a:focus:before, +#example .main.container .example > p a:hover:before, +#example .main.container .example > p a:focus:before { + background-color: #2C76BF; + -webkit-transform: translateY(95%) scaleX(1); + transform: translateY(95%) scaleX(1); +} + #example .ui.ad { max-width: 100%; }