RanchiMall/ribc
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new collapsed text UI

Browse Source
This commit is contained in:
sairaj mote 2022-11-12 16:05:29 +05:30
parent e8f79b864f
commit eaf3798f20
5 changed files with 37 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.js
View File

File diff suppressed because one or more lines are too long

23
css/main.css
View File

@ -262,20 +262,6 @@ sm-textarea {
--max-height: 32ch;
}
sm-button {
--padding: 0.8rem;
}
sm-button[variant=primary] .icon {
fill: rgba(var(--background-color), 1);
}
sm-button[disabled] .icon {
fill: rgba(var(--text-color), 0.6);
}
sm-button.danger {
--background: var(--danger-color);
color: rgba(var(--background-color), 1);
}
sm-spinner {
--size: 1.5rem;
--stroke-width: 0.1rem;
@ -310,6 +296,11 @@ sm-chip {
-moz-user-select: none;
user-select: none;
}
collapsed-text {
--button-background: rgba(var(--foreground-color), 1);
}
ul {
list-style: none;
}
@ -667,6 +658,7 @@ ul {
display: grid;
text-align: center;
align-items: center;
justify-items: center;
}
.multi-state-button > * {
grid-area: 1/1/2/2;
@ -1212,9 +1204,6 @@ ul {
margin-bottom: 0.5rem;
border: solid rgba(var(--text-color), 0.1) thin;
}
.request-card sm-button {
--padding: 0.5rem 0.8rem;
}
.request-card__description {
width: 100%;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

33
css/main.scss
View File

@ -246,27 +246,6 @@ sm-textarea {
--max-height: 32ch;
}
sm-button {
--padding: 0.8rem;
&[variant="primary"] {
.icon {
fill: rgba(var(--background-color), 1);
}
}
&[disabled] {
.icon {
fill: rgba(var(--text-color), 0.6);
}
}
&.danger {
--background: var(--danger-color);
color: rgba(var(--background-color), 1);
}
}
sm-spinner {
--size: 1.5rem;
--stroke-width: 0.1rem;
@ -297,8 +276,10 @@ sm-chip {
font-size: 0.9rem;
--border-radius: 0.3rem;
user-select: none;
&[selected] {
}
}
collapsed-text {
--button-background: rgba(var(--foreground-color), 1);
}
ul {
@ -645,11 +626,10 @@ ul {
display: grid;
text-align: center;
align-items: center;
justify-items: center;
& > * {
grid-area: 1/1/2/2;
}
button {
z-index: 1;
}
@ -1200,9 +1180,6 @@ ul {
border-radius: 0.5rem;
margin-bottom: 0.5rem;
border: solid rgba(var(--text-color), 0.1) thin;
sm-button {
--padding: 0.5rem 0.8rem;
}
}
.request-card__description {

47
index.html
View File

@ -22,18 +22,18 @@
application: "InternManage"
}
</script>
<script src="scripts/lib.min.js"></script>
<script src="scripts/floCrypto.min.js"></script>
<script src="scripts/floBlockchainAPI.min.js"></script>
<script src="scripts/compactIDB.min.js"></script>
<script src="scripts/floCloudAPI.min.js"></script>
<script src="scripts/floDapps.min.js"></script>
<script src="scripts/lib.min.js" defer></script>
<script src="scripts/floCrypto.min.js" defer></script>
<script src="scripts/floBlockchainAPI.min.js" defer></script>
<script src="scripts/compactIDB.min.js" defer></script>
<script src="scripts/floCloudAPI.min.js" defer></script>
<script src="scripts/floDapps.min.js" defer></script>
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"
integrity="sha512-/hVAZO5POxCKdZMSLefw30xEVwjm94PAV9ynjskGbIpBvHO9EBplEcdUlBdCKutpZsF+La8Ag4gNrG0gAOn3Ig=="
crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
<script src="scripts/ribc.min.js"></script>
<script src="scripts/ribc.min.js" defer></script>
<script id="onLoadStartUp">
function onLoadStartUp() {
routeTo('loading')
@ -1818,10 +1818,9 @@
${applyButton}
</div>
${assignedInternsCards.length ? html`<div class="assigned-interns">${assignedInternsCards}</div>` : ''}
<details>
<summary class="task-details__summary">View task details</summary>
<collapsed-text>
${linkifyDescription}
</details>
</collapsed-text>
<div class="timeline-task__details flex flex-wrap gap-0-3">
${duration ? html`
<div class="display-task__detail">
@ -1941,18 +1940,15 @@
})
}
})
const descriptionOptions = {
className: 'task-description ws-pre-line wrap-around',
innerHTML: DOMPurify.sanitize(description)
}
if (status === 'incomplete') {
descriptionOptions.attributes = {
'data-editable': '',
'data-edit-field': 'description',
}
}
const taskDescription = createElement('p', descriptionOptions)
if (status === 'incomplete') {
const taskDescription = createElement('p', {
className: 'task-description ws-pre-line wrap-around',
attributes: {
'data-editable': '',
'data-edit-field': 'description',
},
innerHTML: DOMPurify.sanitize(description)
})
const categories = [];
for (const categoryID in floGlobals.taskCategories) {
categories.push(html`<sm-option value=${categoryID} ?selected=${categoryID === category}>${floGlobals.taskCategories[categoryID]}</sm-option>`)
@ -2003,6 +1999,10 @@
</li>
`;
} else {
const taskDescription = createElement('p', {
className: 'task-description ws-pre-line wrap-around',
innerHTML: DOMPurify.sanitize(linkify(description))
})
return html`
<li class=${`admin-task ${status}`} .dataset=${{ taskId: task }}>
<div class="flex align-center gap-0-3 space-between">
@ -2016,8 +2016,7 @@
<div class="assigned-interns">
${assignedInternsCards}
</div>
<details>
<summary>View details</summary>
<collapsed-text>
${taskDescription}
${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
<div class="display-task__details flex flex-wrap gap-0-3 margin-top-1">
@ -2038,7 +2037,7 @@
<span class="display-task__detail__value">${reward}</span>
</div>
</div>
</details>
</collapsed-text>
</li>
`;
}