Skip to content

Commit

Permalink
Merge pull request #1527 from cintek/improve-footer
Browse files Browse the repository at this point in the history 
improved footer layout
  • Loading branch information
@RogerHaase
RogerHaase authored Aug 31, 2024
2 parents 57ea8b0 + a86ecc5 commit 324b4cd
Show file tree
Hide file tree
Showing 9 changed files with 63 additions and 23 deletions.
2 changes: 1 addition & 1 deletion docs/admin/configure.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ macros to show something else::
{{ sep }}
{{ credit('https://moinmo.in/GPL', 'GPL licensed', 'MoinMoin is GPL licensed.') }}
{{ sep }}
{{ credit('https://validator.w3.org/check?uri=referer', 'Valid HTML 5', 'Click here to validate this page.') }}
{{ credit('https://validator.w3.org/check?uri=referer', 'Valid HTML5', 'Click here to validate this page.') }}
{{ end }}
{% endmacro %}

Expand Down
8 changes: 5 additions & 3 deletions src/moin/static/css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,12 +379,14 @@ div.no-borders,

/* footers */
#moin-footer { clear: both; margin: 0 0; width: 100%; }
#moin-pageinfo,
#moin-wiki-license,
#moin-credits,
#moin-version,
#moin-timings { margin: 10px 20px; text-align: left; font-size: .7em; color: var(--muted); float: left; clear: left; }
#moin-creditlogos { clear: both; float: right; }
#moin-pageinfo, #moin-credits { margin: 0 20px; text-align: left; font-size: .7em; color: var(--muted); }
#moin-creditlogos { display: flex; align-items: end; column-gap: 6pt; }
#moin-creditlogos a { display: grid; }
#moin-credits-container { display: flex; width: 100%; justify-content: space-between;
align-items: end; margin-bottom: 10pt; }

/* ordered lists */
ol,
Expand Down
Binary file removed src/moin/static/img/snow.jpg
View file
Binary file not shown.
8 changes: 5 additions & 3 deletions src/moin/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
{% set before_footer = snippets.before_footer() %}
{% set after_footer = snippets.after_footer() %}
{% set license_info = snippets.license_info() %}
{% set creditlogos = snippets.creditlogos() %}
{% set credits = snippets.credits() %}
{% set creditlogos = snippets.creditlogos() %}

{% block layout %}

Expand Down Expand Up @@ -74,8 +74,10 @@
{% block footer_hr %}<hr>{% endblock %}
{% block footer_itemviews %}{% endblock %}
{% block footer_meta %}{% endblock %}
{{ creditlogos }}
{{ credits }}
<div id="moin-credits-container">
{{ credits }}
{{ creditlogos }}
</div>
{{ license_info }}
{% endblock %}
</footer>
Expand Down
2 changes: 1 addition & 1 deletion src/moin/templates/snippets.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
{{ sep }}
{{ credit('https://moinmo.in/GPL', 'GPL licensed', 'MoinMoin is GPL licensed.') }}
{{ sep }}
{{ credit('http://validator.w3.org/check?uri=referer', 'Valid HTML 5', 'Click here to validate this page.') }}
{{ credit('http://validator.w3.org/check?uri=referer', 'Valid HTML5', 'Click here to validate this page.') }}
{{ end }}
{% endmacro %}

Expand Down
6 changes: 4 additions & 2 deletions src/moin/themes/basic/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,8 +213,10 @@
<footer class="navbar moin-footer">
{% block footer_hr %}<hr/>{% endblock %}
{% block footer_meta %}{% endblock %}
{{ creditlogos }}
{{ credits }}
<div id="moin-credits-container">
{{ credits }}
{{ creditlogos }}
</div>
{{ license_info }}
</footer>
{% endblock %}
Expand Down
8 changes: 5 additions & 3 deletions src/moin/themes/modernized/static/css/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
html { height:100%; color:var(--font_color); font-family:Helvetica, Arial, sans-serif; }
body { height:100%; background-color:var(--body_color); }
#moin-main-wrapper { position:relative; min-height:100%; width:87%; min-width:700px; margin-left:auto; margin-right:auto; margin-top:0; }
#moin-page { padding:1px 1px 105px 1px; display:table; width:100%; background:#fff; background:var(--page_color); border-radius:9px; }
#moin-page { box-sizing: border-box; padding:1px 1px 105px 1px; display:table; width:100%; background:#fff; background:var(--page_color); border-radius:9px; }
#moin-content { padding:.2em 1em 4em 1em; display:table-cell; }

/* links */
Expand Down Expand Up @@ -51,14 +51,15 @@ input[type="text"] { width:96%; }
a.moin-conflict:before { content:url("../img/moin-conflict.png"); margin:0 .2em; }

#moin-footer { position:absolute; bottom:0; }
#moin-footer .moin-itemviews { margin-bottom: 10pt; }

#moin-header { margin:0; padding:7px 0 10px 0; background:var(--header_bg_color); color:var(--heading_color);
line-height:1.12em; border-bottom-left-radius:9px; border-bottom-right-radius:9px; }

#moin-logo { float:left; margin:2px 10px 8px 10px; padding:0; font-size:1.4em; line-height:1em; font-weight:bold; }
#moin-logo { display: inline-block; margin:2px 10px 8px 10px; padding:0; font-size:1.4em; line-height:1em; font-weight:bold; }
#moin-logo img { vertical-align:middle; }
#moin-logo a { color:var(--heading_color); text-decoration:none; }
a.moin-sitename { font-size:1.5em; font-weight:bold; color:var(--selected_link_color); line-height:1.5em; }
a.moin-sitename { display: inline-block; font-size:1.5em; font-weight:bold; color:var(--selected_link_color); line-height:1.5em; }
#moin-username { display:block; margin:6px 4px 4px 4px; padding:0; float:right; font-size:.82em; }
#moin-username a { color:var(--heading_color); }
#moin-username li { display:inline; padding-right:10px; }
Expand All @@ -68,6 +69,7 @@ a.moin-sitename { font-size:1.5em; font-weight:bold; color:var(--selected_link_c
/* page trail */
ul.moin-breadcrumb,
ul.moin-breadcrumb ul.moin-alias { padding:0; margin:0; margin-bottom:4px; }
ul.moin-breadcrumb, a.moin-sitename { padding-left: 10px; }
ul.moin-breadcrumb ul.moin-alias { background-color:var(--body_color);
border:var(--border_style); border-radius:6px; z-index:10; }
ul.moin-breadcrumb li ul.moin-alias li { list-style-type:none; display:block; color:var(--font_color); padding:2px 10px; }
Expand Down
50 changes: 41 additions & 9 deletions src/moin/themes/topside/static/css/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,14 @@
body { font-size: 1em; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* position footer on bottom of window when content is a few lines. */
html { font-size: 1em; min-height: 100%; position: relative; }
#moin-footer { position: absolute; bottom: 0; }
#moin-footer { position: absolute; bottom: 0; display: grid;
grid-template-rows: 1fr auto; grid-template-columns: 1fr 1fr; }
#moin-footer hr { display: none; }
#moin-creditlogos { justify-content: end; }
#moin-credits { margin: 0; display: flex; column-gap: 4pt; grid-row: 3 / 3; }
#moin-pageinfo { margin: 0; }
#moin-content { padding-bottom: 8em; }
#moin-content, #moin-footer { box-sizing: border-box; max-width: 1200px; }
h1,
.moin-pagetitle { text-align: center; }

Expand Down Expand Up @@ -68,15 +74,18 @@ ul.moin-breadcrumb li ul.moin-alias li { display: block; padding: 2px 10px; }

#moin-navibar li { font-size: 1em; }
.moin-edit-actions { display: none; }
#moin-content { margin: 0 5%; width: auto; }
#moin-content { margin: 0 5%; width: auto; padding-bottom: 9em; }

#moin-footer { background-image: url("../../../static/img/white-clouds.jpg");
background-position-y: bottom;
border-top: 1px solid #D7E9FD; padding: 8pt 5% 10pt 5%; }

#moin-footer { background-image: url("../../../static/img/snow.jpg"); border-top: 1px solid #D7E9FD; }
#moin-pageinfo,
#moin-wiki-license,
#moin-credits,
#moin-version,
#moin-timings { margin-left: 5%; color: #444; float: none; clear: left; }
#moin-footer .moin-itemviews { margin: 5px 5%; padding: 0; }
#moin-timings { color: #444; float: none; clear: left; }
#moin-footer .moin-itemviews { margin: 5px 0; padding: 0; }
#moin-creditlogos { margin-right: 5%; padding: 0; }
}

Expand All @@ -86,10 +95,31 @@ ul.moin-breadcrumb li ul.moin-alias li { display: block; padding: 2px 10px; }
ul.moin-itemviews span { display: none; }
}

@media screen and (max-width: 800px) {
@media screen and (max-width: 1400px) {
#moin-footer { width: calc(100vw - 14%); }
}

@media screen and (max-width: 1280px) {
#moin-footer { width: calc(100vw - 4%); }
#moin-footer .moin-itemviews.panel { grid-column: 1 / span 2; grid-row: 1; }
#moin-credits { display: flex; align-items: end; grid-column: 1; grid-row: 3;}
#moin-pageinfo { grid-row: 2; grid-column: 1; }
#moin-footer #moin-creditlogos { grid-row: 2 / span 2; grid-column: 2; margin-right: 0; }
}

@media screen and (max-width: 900px) {
#moin-content { margin: 0 2%; padding-bottom: 16em; }
#moin-header ul { margin: .1em 2% .4em 2%; }
#moin-footer .moin-itemviews { margin: 5px 2%; }
#moin-footer { grid-template-rows: auto auto auto;
grid-template-columns: 1fr 1fr; row-gap: 6pt; }
#moin-footer .moin-itemviews { margin: 5px 0; display: flex; column-gap: 6pt;
row-gap: 10pt; flex-wrap: wrap; grid-column: 1 / span 2; }
#moin-footer .text-container { display: flex; flex-direction: column;
row-gap: 10pt; }
#moin-credits { display: block; grid-column: 1 / span 2; }
#moin-footer #moin-pageinfo { grid-row: 2; grid-column: 1;}
#moin-footer #moin-creditlogos { grid-row: 2; grid-column: 2;}
#moin-footer #moin-pageinfo, #moin-footer #moin-credits { margin: 0; }
}


Expand Down Expand Up @@ -124,9 +154,10 @@ ul.moin-breadcrumb li ul.moin-alias li { display: block; padding: 2px 10px; }
#moin-preview-text-button,
#moin-cancel-text-button { display: none; }

#moin-content { padding-left: 250px; margin: 0 2%; }
#moin-content, #moin-footer { padding-left: 250px; }
#moin-content{ margin: 0 2%; }
#moin-footer { margin: 0 2% 6pt 2%; }

#moin-footer { padding-left: 295px; max-width: 680px; }
#moin-footer .moin-itemviews { display: none; }
/* TODO: if these are all P tags, why float left in common.css? */
#moin-pageinfo,
Expand All @@ -138,6 +169,7 @@ ul.moin-breadcrumb li ul.moin-alias li { display: block; padding: 2px 10px; }

@media (min-width: 1281px) {
#moin-content { margin: 0 7%; }
#moin-footer { margin: 0 7% 6pt 7%; }
}

@media print {
Expand Down
2 changes: 1 addition & 1 deletion src/moin/themes/topside/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@
{%- block footer %}
{% block footer_hr %}<hr/>{% endblock %}
{%- block footer_itemviews %}{% endblock %}
{{- snippets.creditlogos() }}
{%- block footer_meta %}{% endblock %}
{{- snippets.credits() }}
{{- snippets.license_info() }}
{{- snippets.creditlogos() }}
{%- endblock -%}
</footer>
{{- snippets.after_footer() }}
Expand Down

0 comments on commit 324b4cd

Please sign in to comment.