richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixes to definition type dropdown

pull/1177/head
jlukic 10 years ago
parent
201e4b72fa
commit
7df9685d6a
6 changed files with 194 additions and 74 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 110
      server/documents/hotfix.html.eco
  2. 51
      server/documents/modules/dropdown.html.eco
  3. 16
      server/documents/modules/popup.html.eco
  4. 76
      server/files/javascript/semantic.js
  5. 2
      server/files/stylesheets/semantic.css
  6. 13
      server/partials/header.html.eco

110
server/documents/hotfix.html.eco
View File

@ -11,14 +11,7 @@ type : 'Library'
<script>
$(document).ready(function() {
$.fn.modal.settings.debug = true;
var $m = $('#modal');
$m.modal({duration: 3000}).modal('show')
setTimeout(function(){
$m.modal('hide');
}, 1500);
$('.ui.dropdown').dropdown();
});
</script>
@ -26,14 +19,99 @@ setTimeout(function(){
<!-- TEST CSS HERE !-->
<style type="text/css">
</style>
<!--
<div class="main container"> -->
<div class="main container">
<div class="ui modal" id="modal">
hey
</div>
</div>
<div class="ui rp-property modal scrolling transition visible active" style="top: 0px;display: block !important;">
<i class="close icon"></i>
<div class="header">
Create new property
</div>
<div class="content">
<div class="description">
<form accept-charset="UTF-8" action="/projects/1/properties" class="ui form" id="new_property" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="MkWt3fScBFfJ5jTKvFjpTVUnM4mcrzi0JKWMXCBDnHg="></div> <!-- /Error handling -->
<div class="ui stackable grid">
<div class="eight wide column">
<div class="field">
<label for="property_title">Title</label>
<div class="ui corner labeled icon input">
<input id="property_title" name="property[title]" placeholder="Title of your property" type="text">
<i class="fa-font icon"></i>
</div>
</div>
<div class="field">
<label for="property_description">Description</label>
<div class="ui corner labeled icon input">
<input id="property_description" name="property[description]" placeholder="Description of your property" type="text">
<i class="fa-info icon"></i>
</div>
</div>
<div class="ui stackable grid">
<div class="nine wide column">
<div class="field">
<label for="property_price">Price</label>
<div class="ui action input rp-bug">
<input id="property_price" name="property[price]" type="text">
<div class="ui button">INR</div>
</div>
</div>
</div>
<div class="seven wide column">
<div class="field">
<label for="property_area">Area</label>
<div class="ui action input rp-bug">
<input id="property_area" name="property[area]" type="text">
<div class="ui button">Sq.ft</div>
</div>
</div>
</div>
</div>
</div>
<div class="eight wide column">
<div class="field">
<label for="property_property_status">Property status</label>
<div class="ui fluid dropdown select selection" tabindex="0"><select id="property_property_status_id" name="property[property_status_id]"><option value="">Select...</option><option selected="selected" value="1">Available</option>
<option value="3">Sold</option>
<option value="2">Blocked</option></select><i class="dropdown icon"></i><div class="text">Available</div><div class="menu" tabindex="-1"><div class="item active selected" data-value="1">Available</div><div class="item" data-value="2">Blocked</div><div class="item" data-value="3">Sold</div></div></div>
</div>
<div class="ui two column stackable grid">
<div class="column">
<div class="field">
<label for="property_bedrooms">Bedrooms</label>
<input id="property_bedrooms" name="property[bedrooms]" type="number">
</div>
<div class="field">
<label for="property_bathrooms">Bathrooms</label>
<input id="property_bathrooms" name="property[bathrooms]" type="number">
</div>
</div>
<div class="column">
<div class="field">
<label for="property_halls">Halls</label>
<input id="property_halls" name="property[halls]" type="number">
</div>
<div class="field">
<label for="property_kitchens">Kitchens</label>
<input id="property_kitchens" name="property[kitchens]" type="number">
</div>
</div>
</div>
</div>
<div class="sixteen wide right aligned column">
<div class="ui buttons">
<div class="ui button rp-property-hide-modal-button">Cancel</div>
<div class="or"></div>
<button class="ui blue labeled icon button right floated" name="button" type="submit"><i class="fa-plus icon"></i>
Create property
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!--
</div> -->
</body>

51
server/documents/modules/dropdown.html.eco
View File

@ -454,16 +454,18 @@ themes : ['Default']
<div class="dropdown example">
<h4 class="ui header">Inline</h4>
<p>A dropdown can be formatted to appear inline in other content</p>
Show me posts trending
<div class="ui inline dropdown">
<div class="text">today</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-text="today">Today</div>
<div class="item" data-text="this week">This Week</div>
<div class="item" data-text="this month">This Month</div>
<span>
Show me posts trending
<div class="ui inline dropdown">
<div class="text">today</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-text="today">Today</div>
<div class="item" data-text="this week">This Week</div>
<div class="item" data-text="this month">This Month</div>
</div>
</div>
</div>
</span>
</div>
<div class="hover example">
@ -476,12 +478,12 @@ themes : ['Default']
</a>
<div class="ui pointing dropdown link item">
<i class="dropdown icon"></i>
Shopping
<span class="text">Shopping</span>
<div class="menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
Clothing
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
@ -552,7 +554,7 @@ themes : ['Default']
<div class="item">Settings</div>
<div class="item">
<i class="dropdown icon"></i>
Upload Settings
<span class="text">Upload Settings</span>
<div class="menu">
<div class="item">
<i class="check icon"></i>
@ -900,6 +902,21 @@ themes : ['Default']
<h2 class="ui dividing header">Variations</h2>
<div class="dropdown example">
<h4 class="ui header">Compact</h4>
<p>A compact dropdown has no minimum width</p>
<div class="ui compact selection dropdown">
<div class="text">Compact</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Fluid</h4>
<p>A dropdown can take the full width of its parent</p>
@ -1347,7 +1364,7 @@ themes : ['Default']
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
Dogs
<span class="text">Dogs</span>
<div class="menu">
<div class="item">Shiba Inu</div>
<div class="item">Poodle</div>
@ -1356,7 +1373,7 @@ themes : ['Default']
</div>
<div class="item">
<i class="dropdown icon"></i>
Cats
<span class="text">Cats</span>
<div class="menu">
<div class="item">Aegean</div>
<div class="item">Balinese</div>
@ -1436,7 +1453,7 @@ themes : ['Default']
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
Categories
<span class="text">Categories</span>
<div class="menu">
<div class="item">Unread</div>
<div class="item">Promotions</div>
@ -1507,7 +1524,7 @@ themes : ['Default']
<div class="ui teal buttons">
<div class="ui button">Save</div>
<div class="ui combo dropdown icon button">
<div class="ui combo top right pointing dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item"><i class="edit icon"></i> Edit</div>
@ -1531,7 +1548,7 @@ themes : ['Default']
</div>
</div>
<div class="ui dropdown button">
<div class="ui floating dropdown button">
<div class="text">Go to</div>
<i class="dropdown icon"></i>
<div class="menu">

16
server/documents/modules/popup.html.eco
View File

@ -425,14 +425,14 @@ themes : ['Default']
<h4 class="ui header">Target Element</h4>
<p>A popup can specify a different target element than itself to show a popup</p>
<div class="evaluated code">
$('.test.button')
.popup({
position : 'right center',
target : '.test.image',
title : 'My favorite dog',
content : 'My favorite dog would like other dogs as much as themselves'
})
;
$('.test.button')
.popup({
position : 'top right',
target : '.test.image',
title : 'My favorite dog',
content : 'My favorite dog would like other dogs as much as themselves'
})
;
</div>
<div class="ui green test button">Hover Me</div>
<div class="ui divider"></div>

76
server/files/javascript/semantic.js
View File

@ -62,7 +62,7 @@ semantic.ready = function() {
$example = $('.example'),
$shownExample = $example.filter('.shown'),
$overview = $('.overview.button'),
$overview = $('.header.segment .overview'),
//$developer = $('.header .developer.item'),
//$designer = $('.header .designer.item'),
@ -505,26 +505,45 @@ semantic.ready = function() {
return $element;
}
},
overviewMode: function() {
changeMode: function(value) {
if(value == 'overview') {
handler.showOverview();
}
else {
handler.hideOverview();
if(value == 'design') {
handler.designerMode();
}
if(value == 'code') {
handler.developerMode();
}
}
$sectionHeaders.visibility('refresh');
$sectionExample.visibility('refresh');
$footer.visibility('refresh');
},
showOverview: function() {
var
$button = $(this),
$body = $('body'),
$example = $('.example')
;
$body.toggleClass('overview');
$button.toggleClass('active');
if($body.hasClass('overview')) {
$example.each(function() {
$(this).children().not('.ui.header:eq(0), .example p:eq(0), .annotation').hide();
});
$example.filter('.another').hide();
}
else {
$example.each(function() {
$(this).children().not('.ui.header:eq(0), .example p:eq(0), .annotation').show();
});
$example.filter('.another').show();
}
$body.addClass('overview');
$example.each(function() {
$(this).children().not('.ui.header:eq(0), .example p:eq(0)').hide();
});
$example.filter('.another').css('display', 'none');
$('.sticky').sticky('refresh');
},
hideOverview: function() {
var
$body = $('body'),
$example = $('.example')
;
$body.removeClass('overview');
$example.each(function() {
$(this).children().not('.ui.header:eq(0), .example p:eq(0)').show();
});
$example.filter('.another').removeAttr('style');
$('.sticky').sticky('refresh');
},
developerMode: function() {
@ -532,9 +551,6 @@ semantic.ready = function() {
$body = $('body'),
$example = $('.example').not('.no')
;
if($body.hasClass('overview')) {
handler.overviewMode();
}
$example
.each(function() {
$.proxy(handler.createCode, $(this))('developer');
@ -547,9 +563,6 @@ semantic.ready = function() {
$body = $('body'),
$example = $('.example').not('.no')
;
if($body.hasClass('overview')) {
handler.overviewMode();
}
$example
.each(function() {
$.proxy(handler.createCode, $(this))('designer');
@ -683,9 +696,11 @@ semantic.ready = function() {
$demo.fadeIn(500);
}
}
$sectionHeaders.visibility('refresh');
$sectionExample.visibility('refresh');
$footer.visibility('refresh');
if(type === undefined) {
$sectionHeaders.visibility('refresh');
$sectionExample.visibility('refresh');
$footer.visibility('refresh');
}
},
createAnnotation: function() {
@ -937,7 +952,9 @@ semantic.ready = function() {
}
$helpPopup
.popup()
.popup({
position: 'bottom right'
})
;
$swap
@ -945,7 +962,10 @@ semantic.ready = function() {
;
$overview
.on('click', handler.overviewMode)
.dropdown({
action: 'select',
onChange: handler.changeMode
})
;
$menuPopup

2
server/files/stylesheets/semantic.css
View File

@ -746,7 +746,7 @@ body#example.hide {
#example h2 + .example i.code,
#example h3 + .example i.code,
#example h4 + .example i.code {
top: 0em;
top: 1em;
}
/* Spaced */

13
server/partials/header.html.eco
View File

@ -14,14 +14,19 @@
<div class="ui divider"></div>
<% end %>
<% if @document.type is 'UI Module': %>
<a href="/module.html" class="ui right floated basic labeled icon button">
<a href="/module.html" class="ui right floated basic right labeled icon button">
Learn about Modules
<i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to trigger."></i>
<i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to use."></i>
</a>
<% end %>
<% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<div class="ui right floated basic overview button">
Definition
<div class="ui right floated floating overview dropdown basic button">
<span class="text">Definition Type</span>
<div class="menu">
<div data-value="design" class="active item">Design</div>
<div data-value="code" class="item">Code</div>
<div data-value="overview" class="item">Summary</div>
</div>
</div>
<% end %>
<% if @document.themes?: %>

Write Preview
Loading…
Cancel
Save