diff --git inc/template-tags.php inc/template-tags.php old mode 100755 new mode 100644 index ae5eecc..309c41d --- inc/template-tags.php +++ inc/template-tags.php @@ -354,6 +354,8 @@ namespace DevHub { function get_site_section_title() { $parts = explode( '/', $_SERVER['REQUEST_URI'] ); switch ( $parts[1] ) { + case 'resources': + return sprintf( __( 'Developer Resources: %s', 'wporg' ), get_the_title() ); case 'reference': return __( 'Code Reference', 'wporg' ); case 'plugin': diff --git js/page-dashicons.js js/page-dashicons.js new file mode 100644 index 0000000..de98768 --- /dev/null +++ js/page-dashicons.js @@ -0,0 +1,100 @@ +(function( wp, $, window, undefined ) { + + var dashicons = { + copy: function( text, copyMode ) { + if ( copyMode == "css" ) { + window.prompt( "Copy this, then paste in your CSS :before selector.", text ); + } else if ( copyMode == "html" ) { + window.prompt( "Copy this, then paste in your HTML.", text ); + } else { + window.prompt( "Copy this, then paste in your Photoshop textfield.", text ); + } + }, + + random: function() { + var divs = jQuery("#iconlist div").get().sort(function(){ + return Math.round(Math.random())-0.5; + }).slice(0,1); + + attr = jQuery(divs).attr('alt'); + cssClass = jQuery(divs).attr('class'); + dashicons.display( attr, cssClass ); + }, + + display: function( attr, cssClass ){ + // set permalink + var permalink = cssClass.split(' dashicons-')[1]; + window.location.hash = permalink; + + // html copy string + htmltext = ''; + + // glyph copy string + glyphtemp = "&#x" + attr + ";"; + jQuery('#temp').html( glyphtemp ); + glyphtext = jQuery('#temp').text(); + + var tmpl = wp.template( 'glyphs' ); + + jQuery( '#glyph' ).html( tmpl({ + cssClass: cssClass, + attr: attr, + html: htmltext, + glyph: glyphtext + }) ); + + $(window).scrollTop(0); + } + }; + + window.dashicons = dashicons; + + jQuery(document).ready(function() { + + // pick random icon if no permalink, otherwise go to permalink + if ( window.location.hash ) { + permalink = "dashicons-" + window.location.hash.split('#')[1]; + + // sanitize + if ( !/^dashicons-[a-z-]+$/.test( permalink ) ) { + permalink = ""; + dashicons.random(); + } + + attr = jQuery( '.' + permalink ).attr( 'alt' ); + cssClass = jQuery( '.' + permalink ).attr('class'); + dashicons.display( attr, cssClass ); + } else { + dashicons.random(); + } + + jQuery( '#iconlist div' ).click(function() { + + attr = jQuery( this ).attr( 'alt' ); + cssClass = jQuery( this ).attr( 'class' ); + + dashicons.display( attr, cssClass ); + + }); + + var $rows = jQuery('#iconlist div'); + jQuery('#search').keyup(function() { + + // remove update text when using search + jQuery('body').addClass('searching'); + + var val = jQuery.trim(jQuery(this).val()).replace(/ +/g, ' ').toLowerCase(); + + if ( val == '' ) { + jQuery('body').removeClass('searching'); + } + + $rows.show().filter(function() { + var text = jQuery(this).text().replace(/\s+/g, ' ').toLowerCase(); + return !~text.indexOf(val); + }).hide(); + }); + + }); + +})( wp, jQuery, window ); diff --git page-dashicons.php page-dashicons.php new file mode 100644 index 0000000..0e78be8 --- /dev/null +++ page-dashicons.php @@ -0,0 +1,342 @@ + + +
> + +
role="main"> + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +

Admin Menu

+ + +
menu
+
site
+
dashboard
+
post
+
media
+
links
+
page
+
comments
+
appearance
+
plugins
+
users
+
tools
+
settings
+
network
+
home
+
generic
+
collapse
+ +

Welcome Screen

+ + +
write blog
+ +
add page
+
view site
+
widgets and menus
+
comments
+
learn more
+ +

Post Formats

+ + + +
aside
+
image
+
gallery
+
video
+
status
+
quote
+ +
chat
+
audio
+
camera
+
images (alt)
+
images (alt 2)
+
video (alt)
+
video (alt 2)
+
video (alt 3)
+ +

Media

+ + +
archive
+
audio
+
code
+
default
+
document
+
interactive
+
spreadsheet
+
text
+
video
+
audio playlist
+
video playlist
+ +

Image Editing

+ + +
crop
+
rotate left
+
rotate right
+
flip vertical
+
flip horizontal
+
undo
+
redo
+ +

TinyMCE

+ + +
bold
+
italic
+
ul
+
ol
+
quote
+
alignleft
+
aligncenter
+
alignright
+
insertmore
+
spellcheck
+ +
expand
+
contract
+
kitchen sink
+
underline
+
justify
+
textcolor
+
paste
+
paste
+
remove formatting
+
video
+
custom chararcter
+
outdent
+
indent
+
help
+
strikethrough
+
unlink
+
rtl
+
break
+
code
+
paragraph
+ +

Posts Screen

+ + +
align left
+
align right
+
align center
+
align none
+
lock
+
calendar
+
visibility
+
post status
+
edit
+
trash
+ +

Sorting

+ + +
external
+
arrow-up
+
arrow-down
+
arrow-right
+
arrow-left
+
arrow-up
+
arrow-down
+
arrow-right
+
arrow-left
+
arrow-up
+
arrow-down
+
arrow-right
+
arrow-left
+
sort
+
left right
+
randomize
+
list view
+
exerpt view
+ +

Social

+ + +
share
+
share
+
share
+
twitter
+
rss
+
email
+
email
+
facebook
+
facebook
+
googleplus
+
networking
+ +

WordPress.org Specific: Jobs, Profiles, WordCamps

+ + +
hammer
+
art
+
migrate
+
performance
+
universal access
+
universal access (alt)
+
tickets
+
nametag
+
clipboard
+
heart
+
megaphone
+
schedule
+ +

Products

+ + +
wordpress
+
wordpress
+
press this
+
update
+
screenoptions
+
info
+
cart
+
feedback
+
cloud
+
translation
+ +

Taxonomies

+ + +
tag
+
category
+ +

Widgets

+ + +
archive
+
tagcloud
+
text
+ +

Notifications

+ + +
yes
+
no
+
no
+
plus
+
plus
+
minus
+
dismiss
+
marker
+
filled star
+
half star
+
empty star
+
flag
+ +

Misc

+ + +
location
+
location
+
vault
+
shield
+
shield
+
sos
+
search
+
slides
+
analytics
+
pie chart
+
bar chart
+
line chart
+
area chart
+
groups
+
businessman
+
id
+
id
+
products
+
awards
+
forms
+
testimonial
+
portfolio
+
book
+
book
+
download
+
upload
+
backup
+
clock
+
lightbulb
+
microphone
+
desktop
+
tablet
+
smartphone
+
smiley
+
+ +
+ +
+ +

Photoshop Usage

+ +

Use the .OTF version of the font for Photoshop mockups, the web-font versions won't work. For most accurate results, pick the "Sharp" font smoothing.

+ +

CSS Usage

+ +

Link the stylesheet:

+ + 
<link rel="stylesheet" href="css/dashicons.css">
+ +

Now add the icons using the :before selector. You can insert the Star icon like this:

+ + + +
+ +
+ + + + + + + + +
+ diff --git scss/page-dashicons.scss scss/page-dashicons.scss new file mode 100644 index 0000000..aba1493 --- /dev/null +++ scss/page-dashicons.scss @@ -0,0 +1,149 @@ +/** + * Dashicons Page + * + * CSS for Dashicons page + */ +$spacing: 25px; + +.dashicons-page { + padding: 0 !important; + + * { + box-sizing: border-box; + } + + .details { + position: relative; + } + + .icon-filter { + position: absolute; + left: 0; + bottom: $spacing * 2; + padding: 0 2.5em; + width: 30em; + + #search { + width: 100%; + border: 1px solid #ccc; + border-radius: 2px; + font: 11pt sans-serif; + padding: 10px; + background: rgba(255,255,255,.8); + &:focus { + background: #fff; + outline: none; + } + } + } + + .entry-content { + float:left; + margin-top: 0 !important; + padding: 1.5em $spacing; + width: 30em; + } + + #glyph { + float:left; + padding: 1.5em $spacing; + width: 30em; + + .dashicons { + font-size: 240px; + width: 240px; + height: 240px; + overflow: visible; + } + + .info { + float:right; + margin-top: $spacing*2; + width: 11em; + } + + span { + display: block; + margin-bottom: 1em; + + a { + text-decoration: underline; + } + } + + .name { + font-size: .9em; + } + } + + h4 { + margin: 1.5em 0; + padding-top: $spacing; + border-top: 1px solid lightgrey; + + &:first-of-type { + margin-top: 0; + padding-top: 0; + border-top: none; + } + + .searching & { + display: none; + } + } + + #iconlist { + $size: 40px; + margin-top: 1.5em; + + .dashicons { + position: relative; + box-sizing: content-box; + padding: 10px; + width: $size; + height: $size; + overflow: hidden; + white-space: nowrap; + font-size: $size; + line-height: 1; + cursor: pointer; + + &:before { + margin-right: $size; + } + + &:after { + content: attr(alt); + display: block; + font-size: 9px; + color: #999; + text-align: center; + } + + &:hover { + color: #d54e21; + } + } + } + + #instructions { + margin-top: 1.5em; + border-top: 1px solid lightgrey; + + h3 { + margin: 1.5em 0 0.75em; + } + } + + .code { + display: block; + font: 14px/1.5 monospace; + width: 600px; + white-space: pre; + border: 1px solid #ccc; + padding: 10px; + overflow: auto; + min-height: 180px; + } + +} \ No newline at end of file diff --git stylesheets/page-dashicons.css stylesheets/page-dashicons.css new file mode 100644 index 0000000..fc6db5a --- /dev/null +++ stylesheets/page-dashicons.css @@ -0,0 +1,99 @@ +/** + * Dashicons Page + * + * CSS for Dashicons page + */ +.dashicons-page { + padding: 0 !important; } + .dashicons-page * { + box-sizing: border-box; } + .dashicons-page .details { + position: relative; } + .dashicons-page .icon-filter { + position: absolute; + left: 0; + bottom: 50px; + padding: 0 2.5em; + width: 30em; } + .dashicons-page .icon-filter #search { + width: 100%; + border: 1px solid #ccc; + border-radius: 2px; + font: 11pt sans-serif; + padding: 10px; + background: rgba(255, 255, 255, 0.8); } + .dashicons-page .icon-filter #search:focus { + background: #fff; + outline: none; } + .dashicons-page .entry-content { + float: left; + margin-top: 0 !important; + padding: 1.5em 25px; + width: 30em; } + .dashicons-page #glyph { + float: left; + padding: 1.5em 25px; + width: 30em; } + .dashicons-page #glyph .dashicons { + font-size: 240px; + width: 240px; + height: 240px; + overflow: visible; } + .dashicons-page #glyph .info { + float: right; + margin-top: 50px; + width: 11em; } + .dashicons-page #glyph span { + display: block; + margin-bottom: 1em; } + .dashicons-page #glyph span a { + text-decoration: underline; } + .dashicons-page #glyph .name { + font-size: .9em; } + .dashicons-page h4 { + margin: 1.5em 0; + padding-top: 25px; + border-top: 1px solid lightgrey; } + .dashicons-page h4:first-of-type { + margin-top: 0; + padding-top: 0; + border-top: none; } + .searching .dashicons-page h4 { + display: none; } + .dashicons-page #iconlist { + margin-top: 1.5em; } + .dashicons-page #iconlist .dashicons { + position: relative; + box-sizing: content-box; + padding: 10px; + width: 40px; + height: 40px; + overflow: hidden; + white-space: nowrap; + font-size: 40px; + line-height: 1; + cursor: pointer; } + .dashicons-page #iconlist .dashicons:before { + margin-right: 40px; } + .dashicons-page #iconlist .dashicons:after { + content: attr(alt); + display: block; + font-size: 9px; + color: #999; + text-align: center; } + .dashicons-page #iconlist .dashicons:hover { + color: #d54e21; } + .dashicons-page #instructions { + margin-top: 1.5em; + border-top: 1px solid lightgrey; } + .dashicons-page #instructions h3 { + margin: 1.5em 0 0.75em; } + .dashicons-page .code { + display: block; + font: 14px/1.5 monospace; + width: 600px; + white-space: pre; + border: 1px solid #ccc; + padding: 10px; + overflow: auto; + min-height: 180px; }