Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
D
decker-production
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container Registry
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
HCI-Development
decker-production
Commits
1c1467a9
Commit
1c1467a9
authored
7 years ago
by
Henrik Tramberend
Browse files
Options
Downloads
Patches
Plain Diff
Column experiments: split and join classes
parent
849361ac
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
resource/support/decker.css
+10
-0
10 additions, 0 deletions
resource/support/decker.css
src/Filter.hs
+24
-10
24 additions, 10 deletions
src/Filter.hs
test/decks/column-deck.md
+82
-0
82 additions, 0 deletions
test/decks/column-deck.md
test/decks/columns.css
+10
-0
10 additions, 0 deletions
test/decks/columns.css
with
126 additions
and
10 deletions
resource/support/decker.css
+
10
−
0
View file @
1c1467a9
...
...
@@ -558,6 +558,16 @@ body {
background-color
:
#666
;
}
.reveal
section
div
.box
{
break-inside
:
avoid-column
;
}
.reveal
section
div
.css-columns
{
column-count
:
2
;
column-gap
:
1em
;
column-rule-style
:
none
;
}
.reveal
section
div
.columns-2
{
width
:
46%
;
}
...
...
This diff is collapsed.
Click to expand it.
src/Filter.hs
+
24
−
10
View file @
1c1467a9
...
...
@@ -26,17 +26,13 @@ import Data.List
import
Data.List.Split
import
qualified
Data.Map
as
Map
(
Map
,
fromList
,
lookup
)
import
Data.Maybe
import
qualified
Network.URI
as
U
-- import qualified Data.Set as Set
-- import Debug.Trace
import
Debug.Trace
import
Network.HTTP.Conduit
import
Network.HTTP.Simple
import
qualified
Network.URI
as
U
import
Network.URI
(
parseURI
,
uriScheme
)
import
System.Directory
import
System.FilePath
-- import System.FilePath.Posix
import
Text.Blaze
(
customAttribute
)
import
Text.Blaze.Html.Renderer.String
import
Text.Blaze.Html5
as
H
...
...
@@ -46,8 +42,6 @@ import Text.Blaze.Html5.Attributes as A
(
alt
,
class_
,
height
,
id
,
src
,
style
,
title
,
width
)
import
Text.Pandoc
import
Text.Pandoc.Definition
()
-- import Text.Pandoc.JSON
import
Text.Pandoc.Shared
import
Text.Pandoc.Walk
import
Text.Printf
...
...
@@ -190,6 +184,25 @@ isColumnBreak _ = False
columnClass
::
Attr
columnClass
=
(
""
,
[
"column"
],
[]
)
hasClass
::
String
->
Block
->
Bool
hasClass
which
(
Div
(
_
,
classes
,
_
)
_
)
=
which
`
elem
`
classes
hasClass
_
_
=
False
hasAnyClass
::
[
String
]
->
Block
->
Bool
hasAnyClass
which
(
Div
(
_
,
classes
,
_
)
_
)
=
or
$
map
((
flip
elem
)
classes
)
which
hasAnyClass
_
_
=
False
-- | Split join columns with CSS3. Must be performed after `wrapBoxes`.
splitJoinColumns
::
[
Block
]
->
[
Block
]
splitJoinColumns
(
header
:
body
)
=
header
:
(
concatMap
wrapRow
rows
)
where
rows
=
split
(
keepDelimsL
$
whenElt
(
hasAnyClass
[
"split"
,
"join"
]))
body
wrapRow
row
@
(
first
:
_
)
|
hasClass
"split"
first
=
[
Div
(
""
,
[
"css-columns"
],
[]
)
row
]
wrapRow
row
=
row
splitJoinColumns
[]
=
[]
-- Splits the body of a slide into any number of columns.
splitColumns
::
[
Block
]
->
[
Block
]
splitColumns
slide
@
(
header
:
body
)
=
...
...
@@ -279,7 +292,7 @@ setSlideBackground slide@((Header 1 (headerId, headerClasses, headerAttributes)
ImageMedia
->
(
"data-background-image"
,
src
)
setSlideBackground
slide
=
slide
-- | Wrap boxes around H2 headers and the
d
ollowing content. All attributes are
-- | Wrap boxes around H2 headers and the
f
ollowing content. All attributes are
-- promoted from the H2 header to the enclosing DIV.
wrapBoxes
::
[
Block
]
->
[
Block
]
wrapBoxes
(
header
:
body
)
=
header
:
concatMap
wrap
boxes
...
...
@@ -314,10 +327,12 @@ mapSlides func (Pandoc meta blocks) = Pandoc meta (concatMap func slides)
makeSlides
::
Format
->
Pandoc
->
Pandoc
makeSlides
(
Format
"revealjs"
)
=
walk
(
mapSlides
splitJoinColumns
)
.
walk
(
mapSlides
splitColumns
)
.
walk
(
mapSlides
setSlideBackground
)
.
walk
(
mapSlides
wrapBoxes
)
.
walk
(
mapSlides
wrapNoteRevealjs
)
makeSlides
(
Format
"beamer"
)
=
walk
(
mapSlides
splitJoinColumns
)
.
walk
(
mapSlides
splitColumns
)
.
walk
(
mapSlides
wrapBoxes
)
.
walk
(
mapSlides
wrapNoteBeamer
)
makeSlides
_
=
Prelude
.
id
...
...
@@ -506,4 +521,3 @@ lazyLoadImage (Image (ident, cls, values) inlines (url, tit)) = do
let
kvs
=
(
"data-src"
,
url
)
:
[
kv
|
kv
<-
values
,
"data-src"
/=
fst
kv
]
return
(
Image
(
ident
,
cls
,
kvs
)
inlines
(
""
,
tit
))
lazyLoadImage
inline
=
return
inline
This diff is collapsed.
Click to expand it.
test/decks/column-deck.md
0 → 100644
+
82
−
0
View file @
1c1467a9
---
history
:
True
---
# Slide Columns
## Mechanisms
-
Header 3 markers (
`###`
)
-
Box classes
## Header 3 Markers
## Syntax
-
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
------
# Box Classes
## Intro
-
No columns here
## Syntax {.split}
-
Box headers (H2) are marked with CSS classes
-
`split`
starts 2 columns
-
`join`
forces 1 column
## Semantics
-
CSS3 column attributes are used for breaking
-
Breaks occur on box borders
## Outro {.join}
-
No columns here
------
# Box Classes
-
No columns here
-
But possibly very long lines, longer than any column is wide
## Syntax {.split}
-
Box headers (H2) are marked with CSS classes
-
`split`
starts 2 columns
-
`join`
forces 1 column
## Image

------
# Floating Images

{.float-right width="50%"}
## No Columns
-
But floating images that
-
force text to flow around them
## Long Long Lines
-
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
This diff is collapsed.
Click to expand it.
test/decks/columns.css
0 → 100644
+
10
−
0
View file @
1c1467a9
div
.css-columns
{
background-color
:
#eee
;
column-count
:
2
;
column-gap
:
1em
;
column-rule-style
:
none
;
}
div
.box
{
break-inside
:
avoid-column
;
}
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment