Skip to content

Commit 9052eb2

Browse files
author
mtness
committed
[TASK] added documentation
1 parent 448a820 commit 9052eb2

File tree

9 files changed

+133
-118
lines changed

9 files changed

+133
-118
lines changed

‎Documentation/clearcache.png

7.38 KB
Loading

‎Documentation/code-green.png

18.8 KB
Loading

‎Documentation/gridelements.png

11.6 KB
Loading

‎Documentation/languages-columns.png

2.78 KB
Loading

‎Documentation/preview.png

121 KB
Loading

‎Documentation/satisfying.png

19.3 KB
Loading

‎README.md

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,48 @@
11
# mt_backend
22

3+
Main Features:
4+
- overview of page properties in Page Module
5+
- Some QoL fixes for the backend
6+
7+
Did you ever had to edit lots of content pages and review their resources,
8+
or just wanted to see the current slug directly?
9+
10+
Well, I do. And it annoyed the gentle carres out of me that I always had to click on "edit page"
11+
and then the corresponding tab over and over again. But no more!
12+
13+
![alt text](Documentation/preview.png)
14+
315
This TYPO3 Extension provides a preview of page properties in the page module,
4-
and a some css touchup.
16+
the following properties are shown, if available:
17+
- slug
18+
- resources media
19+
- categories
20+
- SEO title
21+
- description
22+
- abstract
23+
- keywords.
24+
25+
QoL Fixes:
26+
- hide clear cache explanation\
27+
![alt text](Documentation/clearcache.png)
28+
- reset of order of module docheader to [Columns|Languages > languages ]\
29+
One wonders why that was changed anyway?!
30+
![alt text](Documentation/languages-columns.png)
31+
32+
33+
and a some css touchup:
34+
35+
- content area background is a little darker
36+
- better alignment of t3-page-column-header and t3-page-ce
37+
![alt text](Documentation/satisfying.png)
38+
- In development mode, the DB fieldnames are green instead of red [so much more friendly to the eyes, you have to see it to believe it!]
39+
![alt text](Documentation/code-green.png)
40+
- Backend forms are a bit more compact
41+
- removed unnecessary padding from gridelements
42+
![alt text](Documentation/gridelements.png)
43+
544

45+
In the hope you may find it useful,
46+
Feedback is always welcome please use the repository issues for that.
647

7-
![alt text](Documentation/preview.png)
48+
A big thank you to Markus Klein especially for helping me with so many little things I stopped counting^^)

‎Resources/Private/Templates/PageHook.html

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,15 @@ <h2 class="t3js-subtitle-inlineedit">{page.subtitle}<a class="hidden" href="#" d
2424

2525
<div class="mt-pageheader">
2626
<div class="mt-pageheader-content">
27-
27+
<f:if condition="{page.slug}">
28+
<div class="mt-pageheader-content-section slug">
29+
<b>Url:</b> <pre>{page.slug}</pre>
30+
</div>
31+
</f:if>
2832
<f:if condition="{files}">
2933
<f:then>
3034
<div class="mt-pageheader-content-section resources">
31-
<h3>Page resources</h3>
35+
<b>Resources:</b>
3236
<div class="imgs">
3337
<f:for each="{files}" as="file">
3438
<f:image image="{file}" maxHeight="40" />
@@ -38,10 +42,32 @@ <h3>Page resources</h3>
3842
</f:then>
3943
</f:if>
4044

45+
<f:if condition="{page.categories}">
46+
<div class="mt-pageheader-content-section categories">
47+
<b>Categories:</b>
48+
<div class="mt-pageheader-section categories">
49+
<ul class="mt-pageheader-list-inline">
50+
<f:format.raw><m:getpagecategories uid="{page.uid}" /></f:format.raw>
51+
</ul>
52+
</div>
53+
</div>
54+
</f:if>
55+
56+
<f:if condition="{page.seo_title}">
57+
<f:then>
58+
<div class="mt-pageheader-content-section description">
59+
<h3>SEO Title:</h3>
60+
<p>{page.seo_title}</p>
61+
</div>
62+
</f:then>
63+
<f:else>
64+
</f:else>
65+
</f:if>
66+
4167
<f:if condition="{page.description}">
4268
<f:then>
4369
<div class="mt-pageheader-content-section description">
44-
<h3>SEO Description</h3>
70+
<h3>Description:</h3>
4571
<p>{page.description}</p>
4672
</div>
4773
</f:then>
@@ -52,28 +78,19 @@ <h3>SEO Description</h3>
5278
<f:if condition="{page.abstract}">
5379
<f:then>
5480
<div class="mt-pageheader-content-section abstract">
55-
<h3>Abstract</h3>
81+
<h3>Abstract:</h3>
5682
<p>{page.abstract}</p>
5783
</div>
5884
</f:then>
5985
</f:if>
6086

61-
<f:if condition="{page.categories}">
62-
<div class="mt-pageheader-content-section categories">
63-
<h3>Categories</h3>
64-
<div class="mt-pageheader-section categories">
65-
<ul class="mt-pageheader-list-inline">
66-
<f:format.raw><m:getpagecategories uid="{page.uid}" /></f:format.raw>
67-
</ul>
87+
<f:if condition="{page.keywords}">
88+
<f:then>
89+
<div class="mt-pageheader-content-section abstract">
90+
<h3>Keywords:</h3>
91+
<p>{page.keywords}</p>
6892
</div>
69-
</div>
70-
</f:if>
71-
72-
<f:if condition="{page.slug}">
73-
<div class="mt-pageheader-content-section slug">
74-
<h3>Page Url</h3>
75-
<pre>{page.slug}</pre>
76-
</div>
93+
</f:then>
7794
</f:if>
7895

7996
</div>

‎Resources/Public/Css/MyBeTouchup.css

Lines changed: 54 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@
99
padding: 20px 20px 5px 20px;
1010
}
1111
.t3-page-ce {
12-
margin: 18px;
12+
margin: 18px 18px 0;
13+
}
14+
.t3-page-ce:last-of-type {
15+
margin-bottom: 12px;
1316
}
1417
.t3-page-ce .t3-page-ce-body {
1518
margin-bottom: 18px;
1619
}
17-
.t3js-page-new-ce {
18-
margin-bottom: 12px;
19-
}
2020

2121
/* mt-pageheader */
2222

@@ -29,29 +29,40 @@ h2.t3js-subtitle-inlineedit {
2929
position: relative;
3030
background-color: rgba(255,255,255,0.5);
3131
border-radius: 2px;
32-
box-shadow: 0 0 1px 0 rgba(0,0,0,.33);
33-
margin: 1em -1px 2em;
34-
border-top: 1px solid #cdcdcd;
32+
margin: .5em -1px 2em;
33+
bottom: 1px solid #cdcdcd;
3534
}
3635
.mt-pageheader-content {
3736
position: relative;
38-
padding: 10px 20px;
37+
padding: 8px 20px;
38+
display: flex;
39+
flex-flow: column;
40+
gap: .5rem;
3941
}
4042
.mt-pageheader h3 {
41-
margin-top: 0;
43+
margin: 0;
4244
font-size: 1em;
4345
font-weight: 700;
4446
}
4547
.mt-pageheader h3 + p {
46-
position: relative;
47-
top: -8px;
4848
margin: 0;
4949
}
5050

51-
5251
.mt-pageheader-content-section {
53-
margin: 10px 0;
52+
display: flex;
53+
align-items: center;
5454
}
55+
.mt-pageheader-content-section b {
56+
display: none;
57+
}
58+
.mt-pageheader-content-section h3 {
59+
display: inline-block;
60+
min-width: 5.5rem;
61+
text-align: right;
62+
padding-right: .5rem;
63+
font-size: .7rem;
64+
}
65+
5566

5667
.mt-pageheader-content-section.resources .imgs {
5768
position: relative;
@@ -77,104 +88,35 @@ h2.t3js-subtitle-inlineedit {
7788
border-radius: 3px;
7889
}
7990

80-
.mt-pageheader .slug pre {
81-
font-size: .95rem;
82-
}
83-
84-
.mt-pageheader-list-inline {
85-
padding-left: 0;
86-
}
87-
.mt-pageheader-list-inline li {
88-
display: inline;
89-
}
90-
91-
/* save buttons in one line, again // now ext:save_close_ce */
92-
93-
/* https://github.com/MichaelNussbaumerGOWEST/backend_save_buttons/blob/master/Resources/Public/css/backend/gowest-backend.css */
94-
95-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton {
96-
border: 1px solid #bbbbbb;
97-
98-
border-radius: 2px;
99-
-o-border-radius: 2px;
100-
-moz-border-radius: 2px;
101-
-webkit-border-radius: 2px;
102-
}
103-
104-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton button.dropdown-toggle {
105-
display: none;
106-
}
107-
108-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton .dropdown-menu {
109-
display: block;
110-
position: relative;
111-
top: auto;
112-
left: auto;
113-
background: none;
114-
border: 0;
115-
box-shadow: none;
116-
-o-box-shadow: none;
117-
-moz-box-shadow: none;
118-
-webkit-box-shadow: none;
119-
120-
padding: 0;
91+
.mt-pageheader .slug {
92+
display: flex;
93+
align-items: center;
94+
width: 100%;
12195
margin: 0;
96+
padding: 0;
12297

123-
min-width: 0;
12498
}
125-
126-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton .dropdown-menu > li {
127-
float: left;
99+
.mt-pageheader .slug pre {
100+
color: #737373;
101+
flex-grow: 1;
102+
padding: .1rem .2rem;
128103
}
129104

130-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton button,
131-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton .dropdown-menu > li > a {
132-
text-indent: -999em;
133-
position: relative;
134-
float: left;
135-
padding: 0;
136-
margin: 0;
137-
width: 24px;
138-
height: 24px;
139-
min-height: 24px;
140-
border: 0;
141105

142-
border-left: 1px solid #bbbbbb;
143-
color: #000;
106+
.mt-pageheader .slug pre {
107+
font-size: .875rem;
144108
}
145109

146-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton button {
147-
border-left: 0;
110+
.mt-pageheader-list-inline {
111+
padding-left: 0;
148112
}
149-
150-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton button:hover,
151-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton .dropdown-menu > li > a:hover {
152-
background: #d5d5d5;
113+
.mt-pageheader-list-inline li {
114+
display: inline;
153115
}
154116

155-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton button:focus,
156-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton .dropdown-menu > li > a:focus {
157-
outline: 0;
158-
}
159117

160-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton button > span.icon,
161-
.module-docheader.t3js-module-docheader .module-docheader-bar .module-docheader-bar-column-left .btn-group.t3js-splitbutton .dropdown-menu > li > a > span.icon {
162-
text-indent: 0;
163-
position: absolute;
164-
top: 50%;
165-
left: 50%;
166118

167119

168-
transform: translate(-50%, -50%);
169-
-o-transform: translate(-50%, -50%);
170-
-moz-transform: translate(-50%, -50%);
171-
-webkit-transform: translate(-50%, -50%);
172-
173-
}
174-
175-
.dropdown-menu h3.dropdown-headline {}
176-
.dropdown-menu h3.dropdown-headline + hr { margin: 0.75em -15px; }
177-
178120
/* hide clear cache explanation */
179121
.dropdown-table-column.dropdown-table-column-top.dropdown-table-text .text-muted { display: none; }
180122

@@ -188,6 +130,9 @@ code {
188130
color: #080;
189131
}
190132

133+
134+
135+
191136
/* better backend form styling by mtness */
192137

193138
h1 { margin-bottom: 10px; }
@@ -206,6 +151,13 @@ h1 { margin-bottom: 10px; }
206151

207152
.form-control-wrap { margin: 1px 0; }
208153

154+
155+
156+
157+
158+
159+
160+
209161
/* misc backend style touchup */
210162

211163
body,
@@ -229,6 +181,9 @@ body .module {
229181
margin-top: 0 !important;
230182
}
231183

184+
div[id*="t3js-form-field-slug"] {
185+
font-family: monospace;
186+
}
232187

233188

234189

@@ -319,6 +274,8 @@ body .module {
319274
}
320275

321276

277+
278+
322279
/* hide mask sponsor-card-container */
323280

324281
.sponsor-card-container {

0 commit comments

Comments
 (0)