search

maxheld83 / accio

Shiny frontend for pensieve R package to study human subjectivity
accio.maxheld.de
Other
3 stars 0 forks source link

replace manual nth-child selectors with javascript #101

Open maxheld83 opened 7 years ago

maxheld83 commented 7 years ago

The current css is a bit ugly, because it has a lot of trivial repetitions of nth-child (see below). This cannot be avoided in css, because you cannot use calc() inside the selectors, which is what we would need here.

However, this could be done in javascript and might make the code easier to maintain. Probably.

.ncol02>.cell:nth-child(-n + 2) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol02>cell:nth-last-child(-n + 2) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol02>.cell:nth-child(4n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol03>.cell:nth-child(-n + 3) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol03>cell:nth-last-child(-n + 3) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol03>.cell:nth-child(6n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol04>.cell:nth-child(-n + 4) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol04>cell:nth-last-child(-n + 4) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol04>.cell:nth-child(8n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol05>.cell:nth-child(-n + 5) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol05>cell:nth-last-child(-n + 5) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol05>.cell:nth-child(10n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol06>.cell:nth-child(-n + 6) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol06>cell:nth-last-child(-n + 6) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol06>.cell:nth-child(12n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol07>.cell:nth-child(-n + 7) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol07>cell:nth-last-child(-n + 7) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol07>.cell:nth-child(14n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol08>.cell:nth-child(-n + 8) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol08>cell:nth-last-child(-n + 8) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol08>.cell:nth-child(16n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol09>.cell:nth-child(-n + 9) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol09>cell:nth-last-child(-n + 9) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol09>.cell:nth-child(18n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol10>.cell:nth-child(-n + 10) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol10>cell:nth-last-child(-n + 10) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol10>.cell:nth-child(20n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol11>.cell:nth-child(-n + 11) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol11>cell:nth-last-child(-n + 11) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol11>.cell:nth-child(22n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol12>.cell:nth-child(-n + 12) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol12>cell:nth-last-child(-n + 12) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol12>.cell:nth-child(24n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol13>.cell:nth-child(-n + 13) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol13>cell:nth-last-child(-n + 13) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol13>.cell:nth-child(26n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol14>.cell:nth-child(-n + 14) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol14>cell:nth-last-child(-n + 14) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol14>.cell:nth-child(28n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}

/*intend every n*2 items, HERE you can set whether to indent even or odd rows*/

.ncol15>.cell:nth-child(-n + 15) {
  margin-top: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol15>cell:nth-last-child(-n + 15) {
  margin-bottom: var(--margins);
}

/*give first/last n items a top/bottom margin*/

.ncol15>.cell:nth-child(30n + 1) {
  margin-left: calc(var(--d2-short) / 2 + 2 * var(--margins));
}