Skip to content

Rf css grid layout #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
namedgraph wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

Rf css grid layout #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions src/main/webapp/static/com/atomgraph/linkeddatahub/css/ldh.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/* LinkedDataHub design layer — loaded on top of the Bootstrap stack.
* Selectors key on RDFa (@typeof, @about) and ARIA, never on Bootstrap grid classes.
* Bootstrap grid classes (span2, span7, row-fluid, etc.) intentionally absent here.
*/

/* ─── Document layout ────────────────────────────────────────── */

.ldh-document {
display: grid;
grid-template-rows: auto 1fr;
}

/* ─── Content area: stacked blocks ───────────────────────────── */

.ldh-content {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}

/* ─── Generic resource block ──────────────────────────────────── */

.ldh-block {
display: flex;
gap: 1rem;
}

.ldh-block-body {
flex: 1 1 auto;
min-width: 0;
}

.ldh-block-nav {
flex: 0 0 200px;
}

/* ─── Resource header ─────────────────────────────────────────── */

.ldh-header {
padding: 0.75rem 0;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 0.75rem;
}

/* ─── RDFa typeof selectors (examples; extend per vocabulary) ─── */

/* Containers get a subtle left border */
[typeof~="https://www.w3.org/ns/ldt/document-hierarchy#Container"] > .ldh-block-body {
border-left: 3px solid #5b9bd5;
padding-left: 0.75rem;
}

/* XHTML content blocks — full width, no nav sidebar */
[typeof~="https://w3id.org/atomgraph/linkeddatahub#XHTML"] {
flex-direction: column;
}

[typeof~="https://w3id.org/atomgraph/linkeddatahub#XHTML"] > .ldh-block-nav {
display: none;
}

/* ─── ARIA state selectors ────────────────────────────────────── */

/* Active mode link */
a[aria-current="page"] {
font-weight: bold;
}

/* Collapsed left sidebar */
.left-sidebar[aria-expanded="false"] {
display: none;
}
14 changes: 7 additions & 7 deletions src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/client/block.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ exclude-result-prefixes="#all"

<!-- show drag handle on left edge hover, but not when left sidebar is active -->

<xsl:template match="div[contains-token(@class, 'block')][key('elements-by-class', 'drag-handle', .)][acl:mode() = '&acl;Write'][not(ixsl:style(ancestor::div[contains-token(@class, 'tab-pane')]/div[contains-token(@class, 'left-sidebar')])?display = 'block')]" mode="ixsl:onmousemove" priority="2">
<xsl:template match="div[contains-token(@class, 'block')][key('elements-by-class', 'drag-handle', .)][acl:mode() = '&acl;Write'][not(ancestor::div[contains-token(@class, 'tab-pane')][1]/div[contains-token(@class, 'left-sidebar')]/@aria-expanded = 'true')]" mode="ixsl:onmousemove" priority="2">
<xsl:variable name="uri" select="xs:anyURI(ancestor::div[contains-token(@class, 'document-body')]/@about)" as="xs:anyURI"/>
<xsl:variable name="contents" select="ixsl:get(ixsl:window(), 'LinkedDataHub.contents')"/>
<xsl:variable name="cache-key" select="'`' || $uri || '`'" as="xs:string"/>
Expand All @@ -258,7 +258,7 @@ exclude-result-prefixes="#all"
<xsl:choose>
<xsl:when test="$offset-x &lt;= $left-edge-threshold and ixsl:style($drag-handle)?display = 'none'">
<!-- get both block and span12 rectangles to calculate intersection -->
<xsl:variable name="span12" select="$drag-handle/parent::*[contains-token(@class, 'span12')]" as="element()"/>
<xsl:variable name="span12" select="$drag-handle/ancestor::*[contains-token(@class, 'span12')][1]" as="element()"/>
<xsl:variable name="block-rect" select="$rect"/> <!-- block's getBoundingClientRect -->
<xsl:variable name="span12-rect" select="ixsl:call($span12, 'getBoundingClientRect', [])"/>

Expand Down Expand Up @@ -311,7 +311,7 @@ exclude-result-prefixes="#all"

<!-- override inline editing form for block types (do nothing if the button is disabled) - prioritize over form.xsl -->

<xsl:template match="div[following-sibling::div[@typeof = ('&ldh;XHTML', '&ldh;Object')]]//button[contains-token(@class, 'btn-edit')][not(contains-token(@class, 'disabled'))]" mode="ixsl:onclick" priority="1">
<xsl:template match="button[contains-token(@class, 'btn-edit')][not(contains-token(@class, 'disabled'))][ancestor::*[@typeof = ('&ldh;XHTML', '&ldh;Object')][1]]" mode="ixsl:onclick" priority="1">
<xsl:param name="block" select="ancestor::div[contains-token(@class, 'block')][1]" as="element()"/>
<!-- for block types, button.btn-edit is placed in its own div.row-fluid, therefore the next row is the actual container -->
<xsl:param name="container" select="$block/descendant::div[@typeof][1]" as="element()"/> <!-- other resources can be nested within object -->
Expand Down Expand Up @@ -419,7 +419,7 @@ exclude-result-prefixes="#all"

<xsl:template match="*[ancestor-or-self::div[contains-token(@class, 'block')][parent::div[contains-token(@class, 'content-body')]][acl:mode() = '&acl;Write']]" mode="ixsl:ondragover" priority="1">
<xsl:variable name="block" select="ancestor-or-self::div[contains-token(@class, 'block')][parent::div[contains-token(@class, 'content-body')]][1]" as="element()"/>
<xsl:variable name="uri" select="xs:anyURI($block/parent::div/parent::div[contains-token(@class, 'document-body')]/@about)" as="xs:anyURI"/>
<xsl:variable name="uri" select="xs:anyURI($block/ancestor::*[contains-token(@class, 'document-body')][1]/@about)" as="xs:anyURI"/>
<xsl:variable name="results" select="ixsl:get(ixsl:get(ixsl:get(ixsl:window(), 'LinkedDataHub.contents'), '`' || $uri || '`'), 'results')" as="document-node()"/>
<xsl:variable name="mode" select="ac:mode($results)" as="xs:anyURI"/>

Expand All @@ -438,7 +438,7 @@ exclude-result-prefixes="#all"

<xsl:template match="*[ancestor-or-self::div[contains-token(@class, 'block')][parent::div[contains-token(@class, 'content-body')]][acl:mode() = '&acl;Write']]" mode="ixsl:ondragenter" priority="1">
<xsl:variable name="block" select="ancestor-or-self::div[contains-token(@class, 'block')][parent::div[contains-token(@class, 'content-body')]][1]" as="element()"/>
<xsl:variable name="uri" select="xs:anyURI($block/parent::div/parent::div[contains-token(@class, 'document-body')]/@about)" as="xs:anyURI"/>
<xsl:variable name="uri" select="xs:anyURI($block/ancestor::*[contains-token(@class, 'document-body')][1]/@about)" as="xs:anyURI"/>
<xsl:variable name="results" select="ixsl:get(ixsl:get(ixsl:get(ixsl:window(), 'LinkedDataHub.contents'), '`' || $uri || '`'), 'results')" as="document-node()"/>
<xsl:variable name="mode" select="ac:mode($results)" as="xs:anyURI"/>

Expand All @@ -455,7 +455,7 @@ exclude-result-prefixes="#all"

<xsl:template match="*[ancestor-or-self::div[contains-token(@class, 'block')][parent::div[contains-token(@class, 'content-body')]][acl:mode() = '&acl;Write']]" mode="ixsl:ondragleave" priority="1">
<xsl:variable name="block" select="ancestor-or-self::div[contains-token(@class, 'block')][parent::div[contains-token(@class, 'content-body')]][1]" as="element()"/>
<xsl:variable name="uri" select="xs:anyURI($block/parent::div/parent::div[contains-token(@class, 'document-body')]/@about)" as="xs:anyURI"/>
<xsl:variable name="uri" select="xs:anyURI($block/ancestor::*[contains-token(@class, 'document-body')][1]/@about)" as="xs:anyURI"/>
<xsl:variable name="results" select="ixsl:get(ixsl:get(ixsl:get(ixsl:window(), 'LinkedDataHub.contents'), '`' || $uri || '`'), 'results')" as="document-node()"/>
<xsl:variable name="mode" select="ac:mode($results)" as="xs:anyURI"/>

Expand All @@ -478,7 +478,7 @@ exclude-result-prefixes="#all"

<xsl:template match="*[ancestor-or-self::div[contains-token(@class, 'block')][parent::div[contains-token(@class, 'content-body')]][acl:mode() = '&acl;Write']]" mode="ixsl:ondrop" priority="1">
<xsl:variable name="block" select="ancestor-or-self::div[contains-token(@class, 'block')][parent::div[contains-token(@class, 'content-body')]][1]" as="element()"/>
<xsl:variable name="uri" select="xs:anyURI($block/parent::div/parent::div[contains-token(@class, 'document-body')]/@about)" as="xs:anyURI"/>
<xsl:variable name="uri" select="xs:anyURI($block/ancestor::*[contains-token(@class, 'document-body')][1]/@about)" as="xs:anyURI"/>
<xsl:variable name="results" select="ixsl:get(ixsl:get(ixsl:get(ixsl:window(), 'LinkedDataHub.contents'), '`' || $uri || '`'), 'results')" as="document-node()"/>
<xsl:variable name="mode" select="ac:mode($results)" as="xs:anyURI"/>

Expand Down
3 changes: 3 additions & 0 deletions src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/client/navigation.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ ORDER BY DESC(?created)
<xsl:if test="$class">
<xsl:attribute name="class" select="$class"/>
</xsl:if>
<xsl:attribute name="aria-expanded" select="'false'"/>

<!-- dataspace-scoped search form -->
<form class="form-search search-form" accept-charset="UTF-8" title="{ac:label(key('resources', 'search-title', document(resolve-uri('static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/translations.rdf', lapp:origin()))))}">
Expand Down Expand Up @@ -304,6 +305,7 @@ ORDER BY DESC(?created)
<xsl:variable name="active-sidebar" select="id('tab-content', ixsl:page())/div[contains-token(@class, 'tab-pane')][contains-token(@class, 'active')]/div[contains-token(@class, 'left-sidebar')]" as="element()?"/>
<xsl:if test="$active-sidebar">
<ixsl:set-style name="display" select="'block'" object="$active-sidebar"/>
<ixsl:set-attribute name="aria-expanded" select="'true'" object="$active-sidebar"/>
</xsl:if>
</xsl:if>
</xsl:template>
Expand All @@ -315,6 +317,7 @@ ORDER BY DESC(?created)
<!-- only hide if the related target does not have this div as ancestor (is not its child) -->
<xsl:if test="not($related-target/ancestor-or-self::div[. is current()])">
<ixsl:set-style name="display" select="'none'"/>
<ixsl:set-attribute name="aria-expanded" select="'false'"/>
</xsl:if>
</xsl:template>

Expand Down
16 changes: 11 additions & 5 deletions src/main/webapp/static/com/atomgraph/linkeddatahub/xsl/bootstrap/2.3.2/resource.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,9 @@ extension-element-prefixes="ixsl"
<xsl:if test="$href">
<xsl:attribute name="href" select="$href"/>
</xsl:if>
<xsl:if test="$active">
<xsl:attribute name="aria-current" select="'page'"/>
</xsl:if>
<xsl:apply-templates select="." mode="ldh:logo"/>
<xsl:value-of>
<xsl:apply-templates select="." mode="ac:label"/>
Expand Down Expand Up @@ -481,9 +484,9 @@ extension-element-prefixes="ixsl"
<xsl:if test="$about">
<xsl:attribute name="about" select="$about"/>
</xsl:if>
<!-- <xsl:if test="exists($typeof)">
<xsl:if test="exists($typeof)">
<xsl:attribute name="typeof" select="string-join($typeof, ' ')"/>
</xsl:if>-->
</xsl:if>
<xsl:if test="$draggable = true()">
<xsl:attribute name="draggable" select="'true'"/>
</xsl:if>
Expand Down Expand Up @@ -542,13 +545,13 @@ extension-element-prefixes="ixsl"
<xsl:if test="$about">
<xsl:attribute name="about" select="$about"/>
</xsl:if>
<!-- <xsl:if test="exists($typeof)">
<xsl:if test="exists($typeof)">
<xsl:attribute name="typeof" select="string-join($typeof, ' ')"/>
</xsl:if>-->
</xsl:if>
<xsl:if test="$draggable = true()">
<xsl:attribute name="draggable" select="'true'"/>
</xsl:if>

<div class="span12">
<div class="drag-handle">
<xsl:if test="acl:mode() = '&acl;Write'">
Expand Down Expand Up @@ -621,6 +624,9 @@ extension-element-prefixes="ixsl"
<xsl:if test="$about">
<xsl:attribute name="about" select="$about"/>
</xsl:if>
<xsl:if test="exists($typeof)">
<xsl:attribute name="typeof" select="string-join($typeof, ' ')"/>
</xsl:if>

<div class="span12">
<xsl:next-match>
Expand Down
Loading
Loading