Commit 6ef99c96 authored by Henrik Tramberend's avatar Henrik Tramberend
Browse files

A few slide layout options for discussion

parent 1c1467a9
......@@ -30,7 +30,7 @@ main = do
let appDataDir = appData dirs
let serverPort = 8888
let serverUrl = "http://0.0.0.0:" ++ (show serverPort)
let serverUrl = "http://localhost:" ++ (show serverPort)
-- Find sources. These are formulated as actions in the Action mondad, such
-- that each new iteration rescans all possible source files.
......
......@@ -568,6 +568,20 @@ body {
column-rule-style: none;
}
.reveal section div.columns.left {background-color: #efe;width:49%;float:left;}
.reveal section div.columns.right {background-color: #eef;width:49%;float:right;}
.reveal section div.top2columns.top {background-color: #fee;}
.reveal section div.top2columns.left {background-color: #efe;width:49%;float:left;}
.reveal section div.top2columns.right {background-color: #eef;width:49%;float:right;}
.reveal section div.bottom2columns.left {background-color: #efe;width:49%;float:left;}
.reveal section div.bottom2columns.right {background-color: #eef;width:49%;float:right;}
.reveal section div.bottom2columns.bottom {background-color: #fee;clear:both;}
.reveal section div.centeredoverlay.back {background-color: #efe;}
.reveal section div.centeredoverlay.front {position:absolute;left:25%;width:50%;top:25%;}
.reveal section div.columns-2 {
width: 46%;
}
......
......@@ -3,6 +3,9 @@
module Filter
( Disposition(..)
, hasAttrib
, hasLayout
, blockClasses
, expandMacros
, makeSlides
, filterNotes
......@@ -181,9 +184,6 @@ isColumnBreak :: Block -> Bool
isColumnBreak (Header level _ _) = level == 3
isColumnBreak _ = False
columnClass :: Attr
columnClass = ("", ["column"], [])
hasClass :: String -> Block -> Bool
hasClass which (Div (_, classes, _) _) = which `elem` classes
hasClass _ _ = False
......@@ -192,10 +192,73 @@ hasAnyClass :: [String] -> Block -> Bool
hasAnyClass which (Div (_, classes, _) _) = or $ map ((flip elem) classes) which
hasAnyClass _ _ = False
-- | Slide layouts
data Layout = Layout
{ name :: String
, areas :: [String]
} deriving (Show)
masters :: [(String, Layout)]
masters =
[ ("default", Layout "default" [])
, ("columns", Layout "columns" ["left", "right"])
, ("top2columns", Layout "top2columns" ["top", "left", "right"])
, ("bottom2columns", Layout "bottom2columns" ["left", "right", "bottom"])
, ("centeredoverlay", Layout "centeredoverlay" ["back", "front"])
]
hasAttrib :: String -> Block -> Maybe String
hasAttrib which (Div (_, _, keyvals) _) = lookup which keyvals
hasAttrib which (Header 1 (_, _, keyvals) _) = lookup which keyvals
hasAttrib which (CodeBlock (_, _, keyvals) _) = lookup which keyvals
hasAttrib which (Para [Image (_, _, keyvals) _ _]) = lookup which keyvals
hasAttrib _ _ = Nothing
hasLayout :: Block -> Maybe Layout
hasLayout block = hasAttrib "layout" block >>= (flip lookup) masters
blockClasses :: Block -> [String]
blockClasses (Div (_, classes, _) _) = classes
blockClasses (Header 1 (_, classes, _) _) = classes
blockClasses (CodeBlock (_, classes, _) _) = classes
blockClasses (Para [Image (_, classes, _) _ _]) = classes
blockClasses _ = []
blockAttribs :: Block -> (String, [String], [(String, String)])
blockAttribs (Div attribs _) = attribs
blockAttribs (Header 1 attribs _) = attribs
blockAttribs (CodeBlock attribs _) = attribs
blockAttribs (Para [Image attribs _ _]) = attribs
blockAttribs _ = ("", [], [])
-- | Fit slide to layout
fitLayout :: [Block] -> [Block]
fitLayout slide@(header:body) =
case hasLayout header of
Just layout ->
let wrapArea blocks@(first:_) =
case whichArea first of
Just area ->
let (_, _, attribs) = blockAttribs first
in [Div ("", [(name layout), area], attribs) blocks]
Nothing -> blocks
wrapArea block = block
whichArea block =
listToMaybe $ intersect (blockClasses block) (areas layout)
slideAreas =
split (keepDelimsL $ whenElt (hasAnyClass (areas layout))) body
orderedAreas =
catMaybes $
map
(\a -> find (maybe False (hasClass a) . listToMaybe) slideAreas)
(areas layout)
in header : concatMap wrapArea orderedAreas
Nothing -> slide
fitLayout [] = []
-- | Split join columns with CSS3. Must be performed after `wrapBoxes`.
splitJoinColumns :: [Block] -> [Block]
splitJoinColumns (header:body) =
header : (concatMap wrapRow rows)
splitJoinColumns (header:body) = header : (concatMap wrapRow rows)
where
rows = split (keepDelimsL $ whenElt (hasAnyClass ["split", "join"])) body
wrapRow row@(first:_)
......@@ -300,7 +363,7 @@ wrapBoxes (header:body) = header : concatMap wrap boxes
boxes = split (keepDelimsL $ whenElt isBoxDelim) body
wrap (Header 2 (id_, cls, kvs) text:blocks) =
[ Div
(id_ ++ "-box", "box" : cls, [])
("", "box" : cls, kvs)
(Header 2 (id_, deFragment cls, kvs) text : blocks)
]
wrap box = box
......@@ -327,6 +390,7 @@ mapSlides func (Pandoc meta blocks) = Pandoc meta (concatMap func slides)
makeSlides :: Format -> Pandoc -> Pandoc
makeSlides (Format "revealjs") =
walk (mapSlides fitLayout) .
walk (mapSlides splitJoinColumns) .
walk (mapSlides splitColumns) .
walk (mapSlides setSlideBackground) .
......
---
css:
- 'columns.css'
history: True
---
......@@ -7,13 +9,20 @@ history: True
## Mechanisms
- Header 3 markers (`###`)
- Box classes
- Box classes (`.split` and `.join`)
- Slide masters (`layout` slide attribute)
## Header 3 Markers
------
# Header 3 Markers
------
# Header 3 Markers
## Syntax
- Each H3 mark starts a new column
- Each H3 mark (`###`) starts a new column
- Columns are generated as DIVs
###
......@@ -28,13 +37,17 @@ history: True
# Box Classes
------
# Box Classes
## Intro
- No columns here
- No columns here, just a very long line spanning the entire slide
## Syntax {.split}
- Box headers (H2) are marked with CSS classes
- Box headers (`##`) are marked with CSS classes
- `split` starts 2 columns
- `join` forces 1 column
......@@ -45,7 +58,7 @@ history: True
## Outro {.join}
- No columns here
- No columns here, just a very long line spanning the entire slide
------
......@@ -66,17 +79,77 @@ history: True
------
# Floating Images
# Slide Masters
------
# Slide Masters {layout="columns"}
## Fixed Layouts {.top}
- Just like Powerpoint and Keynote
## Example {.right}
![](include/06-metal.png)
## Syntax {.left}
- Class and key-value attributes
- Assign content to layout area
- On elements *Header 2*, *Image*, *Code Block*, *DIV*
------
# Slide Masters {layout="top2columns"}
## Fixed Layouts {.top}
![](include/06-metal.png){.float-right width="50%"}
- Just like Powerpoint and Keynote
## No Columns
## Syntax {.left}
- But floating images that
- force text to flow around them
- Class and key-value attributes
- Assign content to layout area
- On elements *Header 2*, *Image*, *Code Block*, *DIV*
## Long Long Lines
## Example {.right}
- Which results in quite pleasant looking layouts
- Space utilization appears to be maximized
- The same could be built for boxes that have a fixed width
![](include/06-metal.png)
------
# Slide Masters {layout="bottom2columns"}
## Fixed Layouts {.bottom}
- Just like Powerpoint and Keynote
## Syntax {.left}
- Class and key-value attributes
- Assign content to layout area
- On elements *Header 2*, *Image*, *Code Block*, *DIV*
## Example {.right}
![](include/06-metal.png)
------
# Header 3 Markers {layout="centeredoverlay"}
## Conclusion {.box .alert .front}
This is probably all bullshit anyway
## Syntax {.back}
- Each H3 mark starts a new column
- Columns are generated as DIVs
## Semantics
- The slide header is not part of the columns
- Columns vertically span the entire slide
- Space is equally distributed between all columns
......@@ -8,3 +8,17 @@ div.css-columns {
div.box {
break-inside: avoid-column;
}
div.columns.left {background-color: #efe;width:49%;float:left;}
div.columns.right {background-color: #eef;width:49%;float:right;}
div.top2columns.top {background-color: #fee;}
div.top2columns.left {background-color: #efe;width:49%;float:left;}
div.top2columns.right {background-color: #eef;width:49%;float:right;}
div.bottom2columns.left {background-color: #efe;width:49%;float:left;}
div.bottom2columns.right {background-color: #eef;width:49%;float:right;}
div.bottom2columns.bottom {background-color: #fee;clear:both;}
div.centeredoverlay.back {background-color: #efe;}
div.centeredoverlay.front {position:absolute;left:25%;width:50%;top:25%;height:50%;}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment