Skip to content

Commit 2dcc5e4

Browse files
timea-solidtimea-solid
committed
fixed broken styles
1 parent 76bcd5f commit 2dcc5e4

5 files changed

Lines changed: 99 additions & 84 deletions

File tree

‎src/header/index.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,13 +123,13 @@ export function createHelpMenu (options: HeaderOptions, helpMenuItems: MenuItems
123123

124124
const helpMenu = document.createElement('nav')
125125

126-
helpMenu.setAttribute('style', style.headerUserMenuNavigationMenu)
126+
helpMenu.setAttribute('style', style.headerUserMenuNavigationMenuNotDisplayed)
127127
helpMenu.setAttribute('aria-hidden', 'true')
128+
helpMenu.setAttribute('id', 'helperNav')
128129
helpMenu.appendChild(helpMenuList)
129130

130131
const helpMenuContainer = document.createElement('div')
131132
helpMenuContainer.setAttribute('style', style.headerBannerUserMenu)
132-
helpMenuContainer.setAttribute('style', style.headerUserMenu)
133133
helpMenuContainer.appendChild(helpMenu)
134134

135135
const helpMenuTrigger = document.createElement('button')
@@ -148,9 +148,13 @@ export function createHelpMenu (options: HeaderOptions, helpMenuItems: MenuItems
148148
helpMenuContainer.addEventListener('mouseover', event => {
149149
clearTimeout(timer)
150150
throttledMenuToggle(event)
151+
const nav = document.getElementById('helperNav')
152+
nav?.setAttribute('style', style.headerUserMenuNavigationMenu)
151153
})
152154
helpMenuContainer.addEventListener('mouseout', event => {
153155
timer = setTimeout(() => throttledMenuToggle(event), 200)
156+
const nav = document.getElementById('helperNav')
157+
nav?.setAttribute('style', style.headerUserMenuNavigationMenuNotDisplayed)
154158
})
155159

156160
return helpMenuContainer
@@ -222,8 +226,9 @@ export async function createUserMenu (store: IndexedFormula, user: NamedNode, us
222226
}
223227
const loggedInMenu = document.createElement('nav')
224228

225-
loggedInMenu.setAttribute('style', style.headerUserMenuNavigationMenu)
229+
loggedInMenu.setAttribute('style', style.headerUserMenuNavigationMenuNotDisplayed)
226230
loggedInMenu.setAttribute('aria-hidden', 'true')
231+
loggedInMenu.setAttribute('id', 'loggedInNav')
227232
loggedInMenu.appendChild(loggedInMenuList)
228233

229234
const loggedInMenuTrigger = document.createElement('button')
@@ -237,8 +242,7 @@ export async function createUserMenu (store: IndexedFormula, user: NamedNode, us
237242
}
238243

239244
const loggedInMenuContainer = document.createElement('div')
240-
loggedInMenuContainer.setAttribute('style', style.headerBannerUserMenu)
241-
loggedInMenuContainer.setAttribute('style', style.headerUserMenu)
245+
loggedInMenuContainer.setAttribute('style', style.headerBannerUserMenuNotDisplayed)
242246
loggedInMenuContainer.appendChild(loggedInMenuTrigger)
243247
loggedInMenuContainer.appendChild(loggedInMenu)
244248

@@ -248,9 +252,13 @@ export async function createUserMenu (store: IndexedFormula, user: NamedNode, us
248252
loggedInMenuContainer.addEventListener('mouseover', event => {
249253
clearTimeout(timer)
250254
throttledMenuToggle(event)
255+
const nav = document.getElementById('loggedInNav')
256+
nav?.setAttribute('style', style.headerUserMenuNavigationMenu)
251257
})
252258
loggedInMenuContainer.addEventListener('mouseout', event => {
253259
timer = setTimeout(() => throttledMenuToggle(event), 200)
260+
const nav = document.getElementById('loggedInNav')
261+
nav?.setAttribute('style', style.headerUserMenuNavigationMenuNotDisplayed)
254262
})
255263

256264
return loggedInMenuContainer

‎src/login/login.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -376,13 +376,12 @@ function signInOrSignUpBox (
376376
options = options || {}
377377
const signInButtonStyle = options.buttonStyle || getDefaultSignInButtonStyle()
378378

379-
// @@ TODO Remove the need to cast HTML element to any
380379
const box: any = dom.createElement('div')
381380
const magicClassName = 'SolidSignInOrSignUpBox'
382381
debug.log('widgets.signInOrSignUpBox')
383382
box.setUserCallback = setUserCallback
384-
box.setAttribute('class', magicClassName);
385-
(box as any).style = 'display:flex;' // @@ fix all typecasts like this
383+
box.setAttribute('class', magicClassName)
384+
box.setAttribute('style', 'display:flex;')
386385

387386
// Sign in button with PopUP
388387
const signInPopUpButton = dom.createElement('input') // multi
@@ -437,7 +436,7 @@ function signInOrSignUpBox (
437436
box.appendChild(signupButton)
438437
signupButton.setAttribute('type', 'button')
439438
signupButton.setAttribute('value', 'Sign Up for Solid')
440-
signupButton.setAttribute('style', `${signInButtonStyle}background-color: #efe;`)
439+
signupButton.setAttribute('style', `${signInButtonStyle}background-color: #efe;${style.headerBannerLoginInput}`)
441440

442441
signupButton.addEventListener(
443442
'click',

‎src/style.js‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,15 @@ export const style = { // styleModule
7777

7878
// ACL
7979
aclControlBoxContainer: 'margin: 1em',
80-
aclControlBoxHeader: 'fontSize: 120%, margin: 0 0 1rem',
81-
aclControlBoxStatus: 'display: none, margin: 1rem 0',
80+
aclControlBoxHeader: 'font-size: 120%; margin: 0 0 1rem',
81+
aclControlBoxStatus: 'display: none; margin: 1rem 0',
8282
aclControlBoxStatusRevealed: 'display: block',
8383
aclGroupContent: 'maxWidth: 650',
84-
accessGroupList: 'display: grid, gridTemplateColumns: 1fr, margin: 1em, width: 100%',
85-
accessGroupListItem: 'display: grid, gridTemplateColumns: 100px auto 30%',
84+
accessGroupList: 'display: grid; grid-template-columns: 1fr; margin: 1em; width: 100%',
85+
accessGroupListItem: 'display: grid; grid-template-columns: 100px auto 30%',
8686
defaultsController: 'display: flex',
87-
defaultsControllerNotice: 'color: #888, flexGrow: 1, fontSize: 80%',
88-
bigButton: 'backgroundColor: white, border: 0.1em solid #888, borderRadius: 0.3em, maxWidth: 50%, paddingBottom: 1em, paddingTop: 1em',
87+
defaultsControllerNotice: 'color: #888; flexGrow: 1; fontSize: 80%',
88+
bigButton: 'background-color: white; border: 0.1em solid #888; border-radius: 0.3em; max-width: 50%; padding-bottom: 1em; padding-top: 1em',
8989
group: 'color: #888',
9090
group1: 'color: green',
9191
group2: 'color: #cc0',
@@ -94,38 +94,40 @@ export const style = { // styleModule
9494
group9: 'color: blue',
9595
group13: 'color: purple',
9696

97-
trustedAppAddApplicationsTable: 'backgroundColor: #eee',
97+
trustedAppAddApplicationsTable: 'background-color: #eee',
9898
trustedAppCancelButton: 'float: right',
99-
trustedAppControllerI: 'borderColor: orange, borderRadius: 1em, borderWidth: 0.1em',
99+
trustedAppControllerI: 'border-color: orange; borderRadius: 1em; borderWidth: 0.1em',
100100
temporaryStatusInit: 'background: green',
101-
temporaryStatusEnd: 'background: transparent, transition: background 5s linear',
101+
temporaryStatusEnd: 'background: transparent; transition: background 5s linear',
102102

103103
// header
104-
headerUserMenuLink: 'background: none, border: 0, color: black, cursor: pointer, display: block, fontFamily: Arial, fontSize: 1em, textAlign: left, padding: 1em, width: 100%, textDecoration: none',
105-
headerUserMenuLinkHover: 'backgroundColor: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
106-
107-
headerUserMenuTrigger: 'background: none, border: 0, cursor: pointer, width: 60px, height: 60px',
108-
headerUserMenuTriggerImg: 'borderRadius: 50%, height: 56px, width: 56px, width: 28px !important',
109-
headerUserMenuButton: 'background: none, border: 0, color: black, cursor: pointer, display: block, fontFamily: Arial, fontSize: 1em, textAlign: left, padding: 1em, width: 100%',
110-
headerUserMenuButtonHover: 'backgroundColor: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
111-
headerUserMenuList: 'listStyle: none, margin: 0, padding: 0',
112-
headerUserMenuNavigationMenu: 'background: white, border: solid 1px #000000, borderRight: 0,position: absolute, right: 0, top: 60px, width: 200px, z-index: 1',
113-
headerUserMenuListItem: 'borderBottom: solid 1px #000000',
114-
headerUserMenuPhoto: 'borderRadius: 50%, backgroundPosition: center, backgroundRepeat: no-repeat,backgroundSize: cover,height: 50px, width: 50px',
115-
headerBanner: 'boxShadow: 0px 1px 4px #000000, display: flex, justifyContent: space-between,padding: 0 1.5em, marginBottom: 4px',
104+
headerUserMenuLink: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; text-decoration: none',
105+
headerUserMenuLinkHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; text-decoration: none; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
106+
headerUserMenuTrigger: 'background: none; border: 0; cursor: pointer; width: 60px; height: 60px',
107+
headerUserMenuTriggerImg: 'border-radius: 50%; height: 56px; width: 28px !important',
108+
headerUserMenuButton: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%',
109+
headerUserMenuButtonHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
110+
headerUserMenuList: 'list-style: none; margin: 0; padding: 0',
111+
headerUserMenuListDisplay: 'list-style: none; margin: 0; padding: 0; display:true',
112+
headerUserMenuNavigationMenu: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: true',
113+
headerUserMenuNavigationMenuNotDisplayed: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: none',
114+
headerUserMenuListItem: 'border-bottom: solid 1px #000000',
115+
headerUserMenuPhoto: 'border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; height: 50px; width: 50px',
116+
headerBanner: 'box-shadow: 0px 1px 4px #000000; display: flex; justify-content: space-between; padding: 0 1.5em; margin-bottom: 4px',
116117
headerBannerLink: 'display: block',
117118
headerBannerRightMenu: 'display: flex',
118-
headerBannerLogin: 'marginLeft: auto',
119-
headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important, padding: 0.5em !important',
120-
headerBannerUserMenu: 'borderLeft: solid 1px #000000, marginLeft: auto',
121-
headerBannerHelpMenu: 'borderLeft: solid 1px #000000, marginLeft: auto',
122-
headerBannerIcon: 'backgroundSize: 65px 60px, height: 60px !important, width: 65px !important', // may just be 65px round($icon-size * 352 / 322);
119+
headerBannerLogin: 'margin-left: auto',
120+
allChildrenVisible: 'display:true',
121+
headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important',
122+
headerBannerUserMenu: 'border-left: solid 1px #000000; margin-left: auto',
123+
headerBannerHelpMenu: 'border-left: solid 1px #000000; margin.left: auto',
124+
headerBannerIcon: 'background-size: 65px 60px !important; height: 60px !important; width: 65px !important', // may just be 65px round($icon-size * 352 / 322);
123125

124126
// footer
125-
footer: 'borderTop: solid 1px $divider-color, fontSize: 0.9em, padding: 0.5em 1.5em',
127+
footer: 'border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em',
126128

127129
// buttons
128-
primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
130+
primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
129131

130132
primaryButtonHover: 'background-color: #9f7dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
131133

‎test/unit/footer/__snapshots__/index.test.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`createControllerInfoBlock makes use of options 1`] = `
44
<div
5-
style="borderTop: solid 1px $divider-color, fontSize: 0.9em, padding: 0.5em 1.5em"
5+
style="border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em"
66
>
77
<span />
88
<a
@@ -22,7 +22,7 @@ exports[`createControllerInfoBlock makes use of options 1`] = `
2222

2323
exports[`createControllerInfoBlock runs createControllerInfoBlock 1`] = `
2424
<div
25-
style="borderTop: solid 1px $divider-color, fontSize: 0.9em, padding: 0.5em 1.5em"
25+
style="border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em"
2626
>
2727
<span />
2828
<a

0 commit comments

Comments
 (0)