Case study: Implementing

fallsnowpeasInternet και Εφαρμογές Web

12 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

118 εμφανίσεις

Case study: Implementing
the design for
mjskok.com

Natalie Keller


Charles River Web

Design by Tom O’Keefe

Design by Tom O’Keefe

Our first responsive site

Adaptivetheme








http://drupal.org/project/adaptivetheme


http://
adaptivethemes.com

Responsive HTML5
Drupal

7
Base
Theme by Jeff
Burnz

Manages layout for different
-
sized
screens

Standard layout

Standard layout, cont’d

Stylesheet

/* Standard layout three
-
col
-
grail */

@media only screen and (min
-
width:951px) {


.container {


width: 100%;


max
-
width: 1280px;


}


.two
-
sidebars .content
-
inner {


margin
-
left: 200px;


margin
-
right: 292px;


}


. . .

}

Smartphone layout
-

landscape

Smartphone layout
-

portrait

Stylesheet

/* Smartphone portrait one
-
col
-
stack */

@media only screen and (max
-
width:320px) {

}

/* Smartphone landscape one
-
col
-
stack */

@media only screen and (min
-
width:321px) and (max
-
width:480px) {

}

/* Tablet portrait one
-
col
-
vert

*/

@media only screen and (min
-
width:481px) and (max
-
width:768px) {

}

/* Tablet landscape three
-
col
-
grail */

@media only screen and (min
-
width:769px) and (max
-
width:950px) {

}

/* Standard layout three
-
col
-
grail */

@media only screen and (min
-
width:951px) {

}

Responsive CSS files


Generated by AT (don’t touch):

files/
at_css
/<your theme>.
responsive.layout.css


All yours:

<your theme>/
css
/<your theme>.
responsive.layout.css

Example: Resource grid

Example: Resource grid

Narrow screen

Three columns
become one.

In the
stylesheet

/* Smartphone portrait */

@media only screen and (max
-
width:320px) {


#resource
-
heading { display: none; }

}

/* Smartphone landscape */

@media only screen and (min
-
width:321px) and (max
-
width:480px) {


#resource
-
heading { display: none; }

}

/* Tablet portrait */

@media only screen and (min
-
width:481px) and (max
-
width:768px) {


#resource
-
heading { display: none; }

}

…more
stylesheet

/* Tablet landscape (for low res; above 950px wide use
regular display) */

@media only screen and (min
-
width:769px)



and
(max
-
width:950px) {


#resource
-
heading { display: none; }

}


/* Standard layout */

@media only screen and (min
-
width:951px) {


.view
-
resources .view
-
empty .view
-
header { display: none; }

}


Testing strategy


Potentially infinite range of devices and
browsers to test


Limited testing hardware

In our office


4 Macs


Each running Windows on a VM


1 Windows netbook


Enough for all the versions of any non
-
mobile browser
we care to test.




Your desktop browser

Tools on the web

i
padpeek.com

testiphone.com

For Windows: spoon.net/browsers runs browsers in a virtual machine

Random photo backgrounds

The steps


Make a photo content type


Make a scaled and cropped image style
for phones


When the page loads, PHP randomly
picks an image and communicates it to
the JS


JavaScript uses the large or small image
depending on the window size.

The code:
template.php

function
skoktheme_preprocess_page
(&
$vars
) {


// Get list of all
background_image

nodes


$query
=

db_select
(
'node
'
,

'n'
);


$query
-
>
condition
(
'n.type
'
,

'
background_image
'
,

'='
)


-
>
fields
(
'n'
,

array
(
'
nid
'
));


$result
=

$query
-
>
execute
()
-
>
fetchAll
();



// Get one randomly from the list


$random_key
=

array_rand
(
$result
);


$
random_nid

=

$
result
[
$random_key
]
-
>
nid
;



$
random_node

=

node_load
(
$
random_nid
);


t
emplate.php
, cont’d


// Get the image filename


$filename
=

$
random_node
-
>
field_photo
[
$
random_node
-
>
language][0][
'filename'
];



// Send the path to files directory and the chosen filename to JS


drupal_add_js
(
array
(
'skoktheme
'
=>


array
(


'
path_to_files
'

=>



variable_get
(
'
file_public_path
'
,
conf_path
() .
'/files'
),


'filename'
=>

$filename


)


),

'setting'
);



// Attach JS file and add to template variables


drupal_add_js
(
drupal_get_path
(
'theme
'
,
'
skoktheme
'
) .

'/skok
-
background.js'
,

array
(
'group'
=> JS_THEME,

'scope'
=>

'footer', ‘cache'
=>

FALSE
));


$
vars
[
'scripts
'
] =

drupal_get_js
();


JavaScript: Drupal behaviors wrapper

(
function
($) {


if
($(
'html'
).
css
(
'background
-
image'
) !=

'none'
) {


Drupal.behaviors.bgImage

= {


attach:

function
(context, settings) {


. . .


}


};


}

})(
jQuery
);

Inside the wrapper

var
pathToFiles
=
Drupal.settings.skoktheme.path_to_files;

// Get a random bg image to plug in

var
filename
=
Drupal.settings.skoktheme.filename;


var
contentwidth = $(
'.container'
).
width
();

if
((contentwidth) <
’481'
) {


$(
'html'
).
css
(
'background
-
image'
,

'url(/
'
+ pathToFiles +
'/styles/phone/public/backgrounds/'

+ filename +
')'
);

}
else
{


$(
'html'
).
css
(
'background
-
image'
,

'url(/'
+ pathToFiles +
'/backgrounds/
' + filename +

')'
);

}

The CSS

From
http://css
-
tricks.com/perfect
-
full
-
page
-
background
-
image/


html {


background:
url(/sites/default/files/backgrounds/grand
-
canyon.jpg) no
-
repeat center center fixed #000;


-
webkit
-
background
-
size: cover;


-
moz
-
background
-
size: cover;


-
o
-
background
-
size: cover;


background
-
size: cover;

}


For IE7
-

8

<body>

<!
--
[if
lt

IE 9]>


<
img

id="background"
src
="/sites/default/files/backgrounds/grand
-
canyon.jpg" />

<![
endif
]
--
>


Get the CSS at
http://css
-
tricks.com/perfect
-
full
-
page
-
background
-
image/

Break from code

Taxonomy menu wth nice paths

The steps

Goal 1: Get terms

in menu and get menu items to
have the right path



Install Taxonomy Menu


Implement one of its hooks


Goal 2:
Get resulting page to show the correct
content



Use contextual filters in Views to limit content
based on the path



Taxonomy edit screen

hook_taxonomy_menu_path()

function
resource_menu_taxonomy_menu_path
()

{


$output = array(


'resource_menu_path_terms'
=>


t('
Taxonomy name/tid
')


);



return $output;

}


Callback

function
resource_menu_path_terms
(
$vid
,
$tid
) {


// Get the vocabulary name


$vocab
=
taxonomy_vocabulary_load
(
$vid
);


$name

=
$vocab
-
>machine_name;



// Build the path


$path
=
$name
.
'/'
.
$tid
;



return
$path
;

}


Configuring the view

Page settings: Path

Advanced: Contextual Filter

Advanced: Contextual Filter

Advanced: Contextual Filter

i.e., mjskok.com/resources

THE END