Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Refined frontend style for toggle cards

Browse source 
refs https://github.com/TryGhost/Team/issues/1209

- adds open/close behavior to toggle cards
- updates styling
This commit is contained in:
Rishabh 2021-11-15 16:41:47 +05:30
parent 158285bfff
commit c3b6e21617
4 changed files with 70 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
core/frontend/src/cards/css/toggle.css Normal file
View file

@ -0,0 +1,34 @@
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{
visibility: hidden;
height: 0;
padding: 0;
}
.kg-toggle-card[data-kg-toggle-state="close"] svg {
transform: rotate(-90deg);
}
.kg-toggle-card {
background: #f1f3f4;
border-radius: 3px;
}
.kg-toggle-heading {
font-weight: bold;
cursor: pointer;
display: flex;
padding: 16px 24px 12px 24px;
}
.kg-toggle-heading svg {
width: 12px;
}
.kg-toggle-heading .kg-toggle-heading-text {
margin-left: 12px;
}
.kg-toggle-content {
display: flex;
padding: 0 24px 16px 24px;
}

16
core/frontend/src/cards/js/toggle.js Normal file
View file

@ -0,0 +1,16 @@
const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading");
const toggleFn = function(event) {
const targetElement = event.target;
const parentElement = targetElement.closest('.kg-toggle-card');
var toggleState = parentElement.getAttribute("data-kg-toggle-state");
if (toggleState === 'close') {
parentElement.setAttribute('data-kg-toggle-state', 'open');
} else {
parentElement.setAttribute('data-kg-toggle-state', 'close');
}
};
for (let i = 0; i < toggleHeadingElements.length; i++) {
toggleHeadingElements[i].addEventListener('click', toggleFn, false);
}

4
package.json
View file

@ -73,7 +73,7 @@
"@tryghost/job-manager": "0.8.12",
"@tryghost/kg-card-factory": "3.1.0",
"@tryghost/kg-default-atoms": "3.1.0",
"@tryghost/kg-default-cards": "5.6.0",
"@tryghost/kg-default-cards": "5.6.1",
"@tryghost/kg-markdown-html-renderer": "5.1.0",
"@tryghost/kg-mobiledoc-html-renderer": "5.2.0",
"@tryghost/limit-service": "1.0.0",
@ -173,7 +173,7 @@
"xml": "1.0.1"
},
"optionalDependencies": {
"@tryghost/html-to-mobiledoc": "1.2.2",
"@tryghost/html-to-mobiledoc": "1.2.3",
"sqlite3": "5.0.2"
},
"devDependencies": {

36
yarn.lock
View file

@ -1415,12 +1415,12 @@
dependencies:
lodash-es "^4.17.11"
"@tryghost/html-to-mobiledoc@1.2.2":
version "1.2.2"
resolved "https://registry.yarnpkg.com/@tryghost/html-to-mobiledoc/-/html-to-mobiledoc-1.2.2.tgz#a25dce21afdf01e288222b4a6eec8389abff32b1"
integrity sha512-yMWPmhTAaEyo6/OHuJ9R7eqOkaX1A38LfXxVkFWtn9wIbIH1wrAnMzyfBhnONMXDo+kahX4Go+dNVlxM7R2NIQ==
"@tryghost/html-to-mobiledoc@1.2.3":
version "1.2.3"
resolved "https://registry.yarnpkg.com/@tryghost/html-to-mobiledoc/-/html-to-mobiledoc-1.2.3.tgz#ad716cf23397484451301a1cad78a065fcd20595"
integrity sha512-JB4a3LRxuC7m+svQSyOQFHalu8cQfuoibW+JUpjYqEFvxKYx0O9hvGdvPzfmS7cVncOTZKrNAyvBXWVroZtnVw==
dependencies:
"@tryghost/kg-parser-plugins" "2.4.2"
"@tryghost/kg-parser-plugins" "2.4.4"
"@tryghost/mobiledoc-kit" "^0.12.4-ghost.1"
jsdom "^16.5.3"
@ -1459,20 +1459,20 @@
resolved "https://registry.yarnpkg.com/@tryghost/kg-card-factory/-/kg-card-factory-3.1.0.tgz#2a135754fabafa32074e6cddb28de0cc3a8d7e7d"
integrity sha512-Y52DqAM/BahMumbX39mBwaSHJTyx/mwIsFVDNCNg0XBoM2ZqHjHLefNBEsUTdocP8LPpK4HYSOxKVugQOBAACA==
"@tryghost/kg-clean-basic-html@^2.1.1":
version "2.1.1"
resolved "https://registry.yarnpkg.com/@tryghost/kg-clean-basic-html/-/kg-clean-basic-html-2.1.1.tgz#1d58dec9682f3e462b4d180a7c7f63b3c737263c"
integrity sha512-KKGvn2S3AVfs/BdWDcAeD24ApkFTrV5fi3PuLqf0Je/uOHgaxkJDEXbvSCCRDkBQiCOfbOC2gXheZafMAXuFkw==
"@tryghost/kg-clean-basic-html@^2.1.2":
version "2.1.2"
resolved "https://registry.yarnpkg.com/@tryghost/kg-clean-basic-html/-/kg-clean-basic-html-2.1.2.tgz#a9a6df5f5fb62646f645280a002f0920861fab8b"
integrity sha512-cvLtJKh9/2uKXZxDIcQMhXTWQN5Lv9qeORUB4zkfJBSvCPmdck28VJMHWdYHhogf/7846v1nkQKIODTBWkSpzg==
"@tryghost/kg-default-atoms@3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-atoms/-/kg-default-atoms-3.1.0.tgz#4daff7104c1f261b1b816dd75ae4104009f9c1e6"
integrity sha512-FfROzVgqJWqJ7cVdS9dcALz7rnzNfV8zcrymAJrDTHDsqzAdMfSLe1tNQRm8zas9pyZLsD8zBGmLxG9dr4WFSA==
"@tryghost/kg-default-cards@5.6.0":
version "5.6.0"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.6.0.tgz#94a88a9f5a4942d7f50f8dfba0a3f8537cbc92e4"
integrity sha512-LigN8VAs9qMKk+Xr00nniUe2MM0RH+KlJp9k0mJGubTd96Sr5/78veJ29LdH9uCnFZWTwRuq8VMhO/P6mDjPNA==
"@tryghost/kg-default-cards@5.6.1":
version "5.6.1"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.6.1.tgz#c2c181d65e71143531dcf8bc595d8cf57a46ffbf"
integrity sha512-js1kElw83RZVVQ0EqT2aApCjmJj3OEGDMFnpwo3NkMARGBwTba/cQzTsjiJkFtOM7Ex3Va+GPQPDhsWK2bouvg==
dependencies:
"@tryghost/kg-markdown-html-renderer" "^5.1.0"
"@tryghost/url-utils" "^2.0.0"
@ -1500,12 +1500,12 @@
semver "^7.3.4"
simple-dom "^1.4.0"
"@tryghost/kg-parser-plugins@2.4.2":
version "2.4.2"
resolved "https://registry.yarnpkg.com/@tryghost/kg-parser-plugins/-/kg-parser-plugins-2.4.2.tgz#6590fe43e1d0d0715e56753c52dd6d69134b9326"
integrity sha512-V8PGdeX5lXrLnwEod+ih7k7dAKKAfvnuyaIavxgcmDLegjm0auHNDZogl9VljlSKQj7LaYRDO7I2bp4+Gv7Giw==
"@tryghost/kg-parser-plugins@2.4.4":
version "2.4.4"
resolved "https://registry.yarnpkg.com/@tryghost/kg-parser-plugins/-/kg-parser-plugins-2.4.4.tgz#a1a7e9e93316c14d49e75770c5db08e056cad826"
integrity sha512-WVQMMJXPdIoDFvPNxqxgPJgEVK1WqgChW8gmcQJMDCoWcNrT4FPAVFdXRAhMxk40Ty64DldOtNqc+Qpn2orexg==
dependencies:
"@tryghost/kg-clean-basic-html" "^2.1.1"
"@tryghost/kg-clean-basic-html" "^2.1.2"
"@tryghost/limit-service@1.0.0":
version "1.0.0"