Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Item14503: improve mobile device layout
i.e. proper clearfix and borders for columns all being laid out verticaly
  • Loading branch information
MichaelDaum committed Sep 25, 2017
1 parent 856cb3b commit 03f9312
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 116 deletions.
152 changes: 77 additions & 75 deletions data/System/GridLayoutPlugin.txt
Expand Up @@ -11,81 +11,7 @@ A grid is a set of HTML div elements that are styled in a way to arrange content
You may either use its CSS directly to craft grid layouts or use its macros to
ease the process of creating the relevant DIV elements.

---++ Understading the CSS

The grid, its rows and cells are all flagged using appropriate CSS class that specifies the configuration of the grid. More specifically a "grid"
is made up of "rows" and each row consists of "cells". A row may have up to 12 cells. All cells in a row have to "add up to 12".

<verbatim class="html">
<div class="foswikiGrid">
<div class="foswikiRow">
<div class="foswikiCol6">

<!-- content content content -->

</div>
<div class="foswikiCol3">

<!-- content content content -->

</div>
<div class="foswikiCol3">

<!-- content content content -->

</div>
</div> <!-- end of first row -->
---
<div class="foswikiRow">
<div class="foswikiCol4">

<!-- content content content -->

</div>
<div class="foswikiCol4">

<!-- content content content -->

</div>
<div class="foswikiCol4">

<!-- content content content -->
</div>
</div> <!-- end of second row -->
</div> <!-- end of grid -->
</verbatim>

Note that the numbers of all =foswikiColxxx= elements add up to 12 (6+3+3=12, 4+4+4=12). You may divide a row by any possible decomposition of 12.
Further note that content is only supposed to be placed inside the =foswikiColxxx= elements. The only exception is a =&lt;hr>= element (produced by ---)
to draw a border separating grid rows visually.

Grids might also be nested to further subdivide cells with yet another grid element inside.

Note further that you will need to load the =grid.css= manually to make use of the CSS classes by adding below line anywhere to the page:

<verbatim class="tml">
%ADDTOZONE{
"head"
id="GRIDLAYOUT"
text="<link rel='stylesheet' href='%PUBURL%/%SYSTEMWEB%/GridLayoutPlugin/grid.css' media='all' />"
}%
</verbatim>

---+++ Class list

All below classes are meant to be used as part of a =&lt;div class="..."> ... &lt;/div>= HTML element.

| *CSS* | *Description* |
| =foswikiGrid= | the grid container; contains =foswikiRow= elements |
| =foswikiRow= | the row container; contains =foswikiColxxx= elements |
| =foswikiCol1=, ... , =foswikiCol12= | column definition; contains the net content |
| =foswikiGutter0=, ..., =foswikiGutter5= | margin of the cells in a grid; applies to =foswikiGrid= element; by default a =foswikiGutter4= is applied to any =foswikiGrid= element |
| =foswikiBorder= | draws a vertical border separating cells visually; may be applied to a =foswikiGrid=, =foswikiRow= or =foswikiCellxxx= element |
| =foswikiOffset0=, ... , =foswikiOffset12= | move a column to the right |
| =foswikiPull0=, ... , =foswikiPull12= | changes column ordering by pulling a column to the left |
| =foswikiPush0=, ... , =foswikiPush12= | changes column ordering by pushing a column to the right |

---++ Macros Syntax
---++ Syntax

=%<nop>BEGINGRID{...}%=

Expand Down Expand Up @@ -488,6 +414,80 @@ jQuery(function($) {
</div>
</div>

---++ DOM and CSS

The grid, its rows and cells are all flagged using appropriate CSS class that specifies the configuration of the grid. More specifically a "grid"
is made up of "rows" and each row consists of "cells". A row may have up to 12 cells. All cells in a row have to "add up to 12".

<verbatim class="html">
<div class="foswikiGrid">
<div class="foswikiRow">
<div class="foswikiCol6">

<!-- content content content -->

</div>
<div class="foswikiCol3">

<!-- content content content -->

</div>
<div class="foswikiCol3">

<!-- content content content -->

</div>
</div> <!-- end of first row -->
---
<div class="foswikiRow">
<div class="foswikiCol4">

<!-- content content content -->

</div>
<div class="foswikiCol4">

<!-- content content content -->

</div>
<div class="foswikiCol4">

<!-- content content content -->
</div>
</div> <!-- end of second row -->
</div> <!-- end of grid -->
</verbatim>

Note that the numbers of all =foswikiColxxx= elements add up to 12 (6+3+3=12, 4+4+4=12). You may divide a row by any possible decomposition of 12.
Further note that content is only supposed to be placed inside the =foswikiColxxx= elements. The only exception is a =&lt;hr>= element (produced by ---)
to draw a border separating grid rows visually.

Grids might also be nested to further subdivide cells with yet another grid element inside.

Note further that you will need to load the =grid.css= manually to make use of the CSS classes by adding below line anywhere to the page:

<verbatim class="tml">
%ADDTOZONE{
"head"
id="GRIDLAYOUT"
text="<link rel='stylesheet' href='%PUBURL%/%SYSTEMWEB%/GridLayoutPlugin/grid.css' media='all' />"
}%
</verbatim>

---+++ Class list

All below classes are meant to be used as part of a =&lt;div class="..."> ... &lt;/div>= HTML element.

| *CSS* | *Description* |
| =foswikiGrid= | the grid container; contains =foswikiRow= elements |
| =foswikiRow= | the row container; contains =foswikiColxxx= elements |
| =foswikiCol1=, ... , =foswikiCol12= | column definition; contains the net content |
| =foswikiGutter0=, ..., =foswikiGutter5= | margin of the cells in a grid; applies to =foswikiGrid= element; by default a =foswikiGutter4= is applied to any =foswikiGrid= element |
| =foswikiBorder= | draws a vertical border separating cells visually; may be applied to a =foswikiGrid=, =foswikiRow= or =foswikiCellxxx= element |
| =foswikiOffset0=, ... , =foswikiOffset12= | move a column to the right |
| =foswikiPull0=, ... , =foswikiPull12= | changes column ordering by pulling a column to the left |
| =foswikiPush0=, ... , =foswikiPush12= | changes column ordering by pushing a column to the right |

---++ Installation Instructions

%$INSTALL_INSTRUCTIONS%
Expand All @@ -496,6 +496,8 @@ jQuery(function($) {
%$DEPENDENCIES%

---++ Change History
%TABLE{columnwidths="7em" tablewidth="100%"}%
| 25 Sep 2017 | proper clearfix and borer of columns all being laid out verticaly on mobile devices |
| 30 Jan 2017 | fixed media query for responsiveness |
| 27 Jan 2017 | use all paddings and margins to percentage; better support for sub-grids |
| 11 Jul 2016 | minor css fixes for flexbox browser prefixes |
Expand Down
37 changes: 21 additions & 16 deletions lib/Foswiki/Plugins/GridLayoutPlugin.pm
Expand Up @@ -20,32 +20,37 @@ use warnings;

use Foswiki::Func ();

our $VERSION = '3.11';
our $RELEASE = '30 Jan 2017';
our $VERSION = '3.20';
our $RELEASE = '25 Sep 2017';
our $SHORTDESCRIPTION = 'A 12er grid system for responsive layouts';
our $NO_PREFS_IN_TOPIC = 1;
our $core;

sub core {
unless (defined $core) {
require Foswiki::Plugins::GridLayoutPlugin::Core;
$core = new Foswiki::Plugins::GridLayoutPlugin::Core();
}
return $core;
}

sub initPlugin {

Foswiki::Func::registerTagHandler('BEGINGRID', sub { return core->BEGINGRID(@_); });
Foswiki::Func::registerTagHandler('ENDGRID', sub { return core->ENDGRID(@_); });
Foswiki::Func::registerTagHandler('BEGINROW', sub { return core->BEGINROW(@_); });
Foswiki::Func::registerTagHandler('ENDROW', sub { return core->ENDROW(@_); });
Foswiki::Func::registerTagHandler('BEGINCOL', sub { return core->BEGINCOL(@_); });
Foswiki::Func::registerTagHandler('ENDCOL', sub { return core->ENDCOL(@_); });
Foswiki::Func::registerTagHandler('BEGINGRID', sub { return getCore()->BEGINGRID(@_); });
Foswiki::Func::registerTagHandler('ENDGRID', sub { return getCore()->ENDGRID(@_); });
Foswiki::Func::registerTagHandler('BEGINROW', sub { return getCore()->BEGINROW(@_); });
Foswiki::Func::registerTagHandler('ENDROW', sub { return getCore()->ENDROW(@_); });
Foswiki::Func::registerTagHandler('BEGINCOL', sub { return getCore()->BEGINCOL(@_); });
Foswiki::Func::registerTagHandler('ENDCOL', sub { return getCore()->ENDCOL(@_); });

$core = undef;

return 1;
}

sub finishPlugin {

}

sub getCore {
unless (defined $core) {
require Foswiki::Plugins::GridLayoutPlugin::Core;
$core = Foswiki::Plugins::GridLayoutPlugin::Core->new();
}
return $core;
}


1;
33 changes: 14 additions & 19 deletions lib/Foswiki/Plugins/GridLayoutPlugin/Core.pm
Expand Up @@ -22,19 +22,6 @@ use Foswiki::Func ();
use Error qw(:try);
use Foswiki::Plugins::GridLayoutPlugin::Grid ();

use constant TRACE => 0; # toggle me

sub writeDebug {
Foswiki::Func::writeDebug("GridLayoutPlugin::Core - $_[0]") if TRACE;
}

sub inlineError {
my $msg = shift;

$msg =~ s/ at .*$//;
return "<div class='foswikiAlert'>$msg</div>";
}

sub new {
my $class = shift;

Expand Down Expand Up @@ -98,7 +85,7 @@ sub BEGINGRID {
$this->pushGrid($grid);
$result = $grid->begin($params);
} catch Error::Simple with {
$result = inlineError(shift);
$result = _inlineError(shift);
};

return $result,
Expand All @@ -112,7 +99,7 @@ sub ENDGRID {
try {
$result = $this->popGrid->end;
} catch Error::Simple with {
$result = inlineError(shift);
$result = _inlineError(shift);
};

return $result,
Expand All @@ -126,7 +113,7 @@ sub BEGINROW {
try {
$result = $this->currentGrid->beginRow($params);
} catch Error::Simple with {
$result = inlineError(shift);
$result = _inlineError(shift);
};

return $result;
Expand All @@ -140,7 +127,7 @@ sub ENDROW {
try {
$result = $this->currentGrid->endRow;
} catch Error::Simple with {
$result = inlineError(shift);
$result = _inlineError(shift);
};

return $result;
Expand All @@ -154,7 +141,7 @@ sub BEGINCOL {
try {
$result = $this->currentGrid->beginCol($params);
} catch Error::Simple with {
$result = inlineError(shift);
$result = _inlineError(shift);
};

return $result;
Expand All @@ -168,10 +155,18 @@ sub ENDCOL {
try {
$result = $this->currentGrid->endCol;
} catch Error::Simple with {
$result = inlineError(shift);
$result = _inlineError(shift);
};

return $result;
}

sub _inlineError {
my $msg = shift;

$msg =~ s/ at .*$//;
return "<div class='foswikiAlert'>$msg</div>";
}


1;
7 changes: 1 addition & 6 deletions lib/Foswiki/Plugins/GridLayoutPlugin/Grid.pm
Expand Up @@ -21,12 +21,6 @@ use warnings;
use Foswiki::Func ();
use Error qw(:try);

use constant TRACE => 0; # toggle me

sub writeDebug {
Foswiki::Func::writeDebug("GridLayoutPlugin::Grid - $_[0]") if TRACE;
}

sub new {
my $class = shift;

Expand Down Expand Up @@ -123,6 +117,7 @@ sub beginCol {

my $width = $params->{_DEFAULT} || $params->{width};
$width = 12 - $this->{rowWidth} - $offset unless defined $width;
$width = 12 if $width == 0;

throw Error::Simple("illegal width: $width")
if ($width =~ /[^\d]/ || $width < 1 || $width > 12);
Expand Down
1 change: 1 addition & 0 deletions lib/Foswiki/Plugins/GridLayoutPlugin/MANIFEST
@@ -1,3 +1,4 @@
!noci
data/System/GridLayoutPlugin.txt 0644
lib/Foswiki/Plugins/GridLayoutPlugin/Config.spec 0644
lib/Foswiki/Plugins/GridLayoutPlugin/Core.pm 0644
Expand Down
12 changes: 12 additions & 0 deletions pub/System/GridLayoutPlugin/grid.uncompressed.css
Expand Up @@ -316,6 +316,15 @@
padding-right:0 !important;
margin:1.385em 0 0 0 !important;
}
.foswikiCol:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
.foswikiGrid > .foswikiRow {
margin-left:0 !important;
margin-right:0 !important;
Expand All @@ -326,6 +335,9 @@
border-top-width:1px;
padding-top:1.385em;
}
.foswikiGrid > .foswikiRow > .foswikiBorder:first-of-type {
border-top-width:0;
}
.foswikiGrid > hr {
display:none;
}
Expand Down

0 comments on commit 03f9312

Please sign in to comment.