Skip to content

Commit c8d88b4

Browse files
bourgeoaAlain Bourgeois
bourgeoa
and
Alain Bourgeois
authored
Milestone3m responsive (#609)
* test * make panes responsive --------- Co-authored-by: Alain Bourgeois <alain@bourgeoa.fr>
1 parent d32fb78 commit c8d88b4

12 files changed

Lines changed: 156 additions & 53 deletions

File tree

‎jest.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export default {
33
coverageDirectory: 'coverage',
44
preset: 'ts-jest/presets/js-with-babel',
55
testEnvironment: 'jsdom',
6+
setupFiles: ['./test/helpers/globals.js'],
67
testEnvironmentOptions: {
78
customExportConditions: ['node']
89
},

‎src/RDFXMLPane.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export const RDFXMLPane = {
5353
sz.setBase(subject.uri)
5454
const str = sz.statementsToXML(sts)
5555
const pre = myDocument.createElement('PRE')
56+
pre.setAttribute('style', 'overflow-x: auto; max-width: 100%; box-sizing: border-box;')
5657
pre.appendChild(myDocument.createTextNode(str))
5758
div.appendChild(pre)
5859
return div

‎src/form/pane.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export const formPane = {
103103
complainIfBad
104104
)
105105
)
106-
e.setAttribute('style', 'float: right;')
106+
e.setAttribute('style', 'margin-left: auto; display: block;')
107107
}
108108
}
109109
const anchor = dom.createElement('a')

‎src/humanReadablePane.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const humanReadablePane = {
185185
const clean = DOMPurify.sanitize(res)
186186
frame.innerHTML = clean
187187
frame.setAttribute('class', 'doc')
188-
frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; width: 800px; resize: both; overflow: auto;`)
188+
frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; max-width: 100%; width: 100%; box-sizing: border-box; resize: both; overflow: auto;`)
189189
}).catch(error => {
190190
console.error('Error fetching markdown content:', error)
191191
frame.innerHTML = '<p>Error loading content</p>'
@@ -195,7 +195,7 @@ const humanReadablePane = {
195195
const setIframeAttributes = (frame, lines) => {
196196
frame.setAttribute('src', subject.uri)
197197
frame.setAttribute('class', 'doc')
198-
frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; width: 800px; resize: both; overflow: auto;`)
198+
frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; max-width: 100%; width: 100%; box-sizing: border-box; resize: both; overflow: auto;`)
199199
}
200200

201201
if (isMarkdown) {

‎src/n3Pane.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export const n3Pane = {
5151
sz.setBase(subject.uri)
5252
const str = sz.statementsToN3(sts)
5353
const pre = myDocument.createElement('PRE')
54+
pre.setAttribute('style', 'overflow-x: auto; max-width: 100%; box-sizing: border-box;')
5455
pre.appendChild(myDocument.createTextNode(str))
5556
div.appendChild(pre)
5657
return div

‎src/pad/padPane.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.pad-layout {
2+
background-color: white;
3+
min-width: 94%;
4+
margin-right: 3%;
5+
margin-left: 3%;
6+
min-height: 13em;
7+
display: flex;
8+
flex-direction: column;
9+
box-sizing: border-box;
10+
}
11+
12+
.pad-row {
13+
display: flex;
14+
flex-wrap: wrap;
15+
width: 100%;
16+
}
17+
18+
.pad-main {
19+
flex: 1 1 100%;
20+
width: 100%;
21+
}
22+
23+
.pad-controls {
24+
gap: 0.5em;
25+
align-items: center;
26+
}
27+
28+
.pad-cell {
29+
flex: 1 1 auto;
30+
}
31+
32+
@media (max-width: 600px) {
33+
.pad-controls .pad-cell {
34+
flex: 1 1 100%;
35+
}
36+
}

‎src/pad/padPane.ts‎

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { icons, ns, pad, widgets, login } from 'solid-ui'
22
import { authn, AppDetails } from 'solid-logic'
33
import { graph, log, NamedNode, Namespace, sym, serialize, Store } from 'rdflib'
44
import { PaneDefinition } from 'pane-registry'
5+
import './padPane.css'
56
/* pad Pane
67
**
78
*/
@@ -517,38 +518,42 @@ const paneDef: PaneDefinition = {
517518
const div = dom.createElement('div')
518519

519520
// Build the DOM
520-
const structure = div.appendChild(dom.createElement('table')) // @@ make responsive style
521-
structure.setAttribute(
522-
'style',
523-
'background-color: white; min-width: 94%; margin-right:3% margin-left: 3%; min-height: 13em;'
524-
)
525-
526-
const naviLoginoutTR = structure.appendChild(dom.createElement('tr'))
527-
naviLoginoutTR.appendChild(dom.createElement('td')) // naviLoginout1
528-
naviLoginoutTR.appendChild(dom.createElement('td'))
529-
naviLoginoutTR.appendChild(dom.createElement('td'))
530-
531-
const naviTop = structure.appendChild(dom.createElement('tr')) // stuff
532-
const naviMain = naviTop.appendChild(dom.createElement('td'))
533-
naviMain.setAttribute('colspan', '3')
534-
535-
const naviMiddle = structure.appendChild(dom.createElement('tr')) // controls
536-
const naviMiddle1 = naviMiddle.appendChild(dom.createElement('td'))
537-
const naviMiddle2 = naviMiddle.appendChild(dom.createElement('td'))
538-
const naviMiddle3 = naviMiddle.appendChild(dom.createElement('td'))
539-
540-
const naviStatus = structure.appendChild(dom.createElement('tr')) // status etc
521+
const structure = div.appendChild(dom.createElement('div')) // responsive flex layout
522+
structure.className = 'pad-layout'
523+
524+
const naviLoginoutTR = structure.appendChild(dom.createElement('div'))
525+
naviLoginoutTR.className = 'pad-row'
526+
naviLoginoutTR.appendChild(dom.createElement('div')) // naviLoginout1
527+
naviLoginoutTR.appendChild(dom.createElement('div'))
528+
naviLoginoutTR.appendChild(dom.createElement('div'))
529+
530+
const naviTop = structure.appendChild(dom.createElement('div')) // stuff
531+
naviTop.className = 'pad-row'
532+
const naviMain = naviTop.appendChild(dom.createElement('div'))
533+
naviMain.className = 'pad-main'
534+
535+
const naviMiddle = structure.appendChild(dom.createElement('div')) // controls
536+
naviMiddle.className = 'pad-row pad-controls'
537+
const naviMiddle1 = naviMiddle.appendChild(dom.createElement('div'))
538+
naviMiddle1.className = 'pad-cell'
539+
const naviMiddle2 = naviMiddle.appendChild(dom.createElement('div'))
540+
naviMiddle2.className = 'pad-cell'
541+
const naviMiddle3 = naviMiddle.appendChild(dom.createElement('div'))
542+
naviMiddle3.className = 'pad-cell'
543+
544+
const naviStatus = structure.appendChild(dom.createElement('div')) // status etc
545+
naviStatus.className = 'pad-row'
541546
const statusArea = naviStatus.appendChild(dom.createElement('div'))
542547

543-
const naviSpawn = structure.appendChild(dom.createElement('tr')) // create new
548+
const naviSpawn = structure.appendChild(dom.createElement('div')) // create new
549+
naviSpawn.className = 'pad-row'
544550
const spawnArea = naviSpawn.appendChild(dom.createElement('div'))
545551

546-
const naviMenu = structure.appendChild(dom.createElement('tr'))
547-
naviMenu.setAttribute('class', 'naviMenu')
548-
// naviMenu.setAttribute('style', 'margin-top: 3em;');
549-
naviMenu.appendChild(dom.createElement('td')) // naviLeft
550-
naviMenu.appendChild(dom.createElement('td'))
551-
naviMenu.appendChild(dom.createElement('td'))
552+
const naviMenu = structure.appendChild(dom.createElement('div'))
553+
naviMenu.setAttribute('class', 'pad-row naviMenu')
554+
naviMenu.appendChild(dom.createElement('div')) // naviLeft
555+
naviMenu.appendChild(dom.createElement('div'))
556+
naviMenu.appendChild(dom.createElement('div'))
552557

553558
const options: any = { statusArea, timingArea: naviMiddle1 }
554559

‎src/playlist/playlistPane.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,18 +100,14 @@ export default {
100100
div.setAttribute('class', 'imageView')
101101
img = myDocument.createElement('IFRAME')
102102
img.setAttribute('src', uri)
103-
img.setAttribute('width', 560)
104-
img.setAttribute('height', 315)
105103
img.setAttribute('frameborder', 0)
106-
img.setAttribute('style', 'max-width: 850px; max-height: 100%;')
104+
img.setAttribute('style', 'width: 100%; aspect-ratio: 16/9; max-width: 100%; border: 0;')
107105
img.setAttribute('allowfullscreen', 'true')
108106
} else {
109107
div.setAttribute('class', 'imageView')
110108
img = myDocument.createElement('IMG')
111109
img.setAttribute('src', obj.value)
112-
img.setAttribute('width', 560)
113-
img.setAttribute('height', 315)
114-
img.setAttribute('style', 'max-width: 560; max-height: 315;')
110+
img.setAttribute('style', 'max-width: 100%; height: auto;')
115111
}
116112

117113
let descDiv

‎src/slideshow/slideshowPane.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const slideshowPane = {
6464
const objectURL = URL.createObjectURL(myBlob)
6565
img.setAttribute('src', objectURL) // w640 h480 //
6666
})
67-
img.setAttribute('width', '100%')
67+
img.style.width = '100%'
6868
figure.appendChild(dom.createElement('figcaption'))
6969
}
7070
const options = { dom }

‎src/socialPane.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.socialPane .social-layout {
2+
display: flex;
3+
flex-wrap: wrap;
4+
width: 100%;
5+
gap: 0;
6+
}
7+
8+
.socialPane .social-nav {
9+
flex: 1 1 22%;
10+
min-width: 8rem;
11+
background-color: #eee;
12+
border: 0;
13+
padding: 0.5em;
14+
box-sizing: border-box;
15+
}
16+
17+
.socialPane .social-main {
18+
flex: 2 1 50%;
19+
min-width: 12rem;
20+
background-color: #fff;
21+
color: #000;
22+
border-left: 1px solid #ccc;
23+
border-right: 1px solid #ccc;
24+
border-bottom: 1px solid #ccc;
25+
padding: 0;
26+
box-sizing: border-box;
27+
width: 100%;
28+
}
29+
30+
.socialPane .social-pic {
31+
width: 100%;
32+
border: none;
33+
margin: 0;
34+
padding: 0;
35+
}
36+
37+
@media (max-width: 600px) {
38+
.socialPane .social-nav,
39+
.socialPane .social-main {
40+
flex: 1 1 100%;
41+
width: 100%;
42+
}
43+
}

0 commit comments

Comments
 (0)