adaptlearning/theming

Supporting files Adapt theme creation.

Sam Howell

@5am_gitlab

ah thanks

don't know how i missed that. I'll give it a try and see if it helps

Oliver Foster

@oliverfoster

Probably not

You need to debug the code

https://api.jquery.com/even-selector/ :even is deprecated

you want $('.article').even()

and you should stop using coreJS/

it's core/js/

also coreViews/ is core/js/views/

Sam Howell

@5am_gitlab

is that also true of v4? sorry, should have mentioned versions

(framework v4)

ok I can see it's also core/js/ in my version. not sure why it's coreJS in the file. i took this plugin on from a previous team member a year or so ago

been trying to improve it ever since

Oliver Foster

@oliverfoster

they should all be by file/folder reference

those shortcuts are a pain for compiling

Sam Howell

@5am_gitlab

ok thanks, I'll make a note to change that

Sam Howell

@5am_gitlab

I'm hoping someone with good git experience could help me with something. A lot of the dev work I do involves creating custom themes. I want to save myself time by creating a good template (with certain features relevant to all future custom themes), then fork/branch from that template whenever I need to develop a new custom theme. The reason I say fork/branch instead of just creating a new repo, is because I want a way to push fixes / non-conflicting changes from the original template out to all the custom themes, so that if I need to fix something which applies to all of them, I don't need to spend ages going into each one, fixing, commiting, pushing etc. Does anyone know of a sensible way to achieve this (or the next best thing)? From the research I've done so far, GitHub doesn't allow forking inside the same account, so they suggest some alternatives - but I'm not sure if these are what I'm after.

Oliver Foster

@oliverfoster

it sounds like you have a few issues you're trying to solve with one solution

do you reuse the custom themes enough to warrant putting them on github?

you said you want to distribute changes from the template theme to the custom themes. i imagine you would only need make sure the custom theme is up to date from the template, only when building a course or installing a theme in it?

whilst there is a limit of 1 theme per course, you can have as many extensions as you like.

it might be better to keep all of your template behaviour in an extension and then use it in your custom themes?

Oliver Foster

@oliverfoster

that line between custom theme changes and reusable template theme pieces will shift over time, so you'll probably find it quite difficult to automate the distribution of changes from a reusable template into all of your custom themes as they progress

Sam Howell

@5am_gitlab

Thanks @oliverfoster, that's given me some things to think about. For clarification, the themes I mentioned are either used for course ranges (mutliple courses with a single theme and maybe a few different presets), made for customers as one-time offerings, then uploaded onto their AATs. If we or the customer find any bugs with any theme, I'll provide the fix needed. We use GitHub just to manage all the themes and track these occasional changes. I hadn't thought about using an extension to provide theme enhancements and additional options, but I would like to work on developing more extensions soon, so this might be a good starting point.

Jack Schofield

@jschof1

Hey is anyone else getting this issue after updating vanilla theme and the GMCQ plugin?

Other updated contrib components seem to be working fine apart from this one and I can't get to the bottom of why

Oliver Foster

@oliverfoster

@guywillis

Sam Howell

@5am_gitlab

I'm trying to find a workaround for the fact iOS doesn't support background-attachment: fixed. What's the best way to check for iOS, ideally with CSS/Less, so that I can add iOS-specific rules in my theme? I tried the following in my theme.js, but the course page won't load in iOS:

Adapt.on("pageView:postRender", function(view) {
  [...]
  if (!navigator.userAgent.indexOf("Mac") != -1) return;
  var bg = $(".can-background-contentObject");
  if (!bg) return;
  bg.css("background-image", "none");
}

Any suggestions much appreciated.

Oliver Foster

@oliverfoster

You can do it all in CSS

the HTML tag has device specific classes

Sam Howell

@5am_gitlab

Thanks @oliverfoster. Would the following selector work? (I can't inspect the DOM on iOS as we only have a couple of mobile devices, so I can't see the specific classes in the html tag).

html.OS-ios {
  [...]
}

Oliver Foster

@oliverfoster

you can use chrome dev tools on a desktop to pretend to be on a mobile operating system

https://developer.chrome.com/docs/devtools/device-mode/

Sam Howell

@5am_gitlab

thanks @oliverfoster I can now see there's both os-ios and OS-ios to target. Now I just need to figure out the right code to add.

Oliver Foster

@oliverfoster

OS-ios is for backward compatibility

Sam Howell

@5am_gitlab

I've started getting the following error, which makes no sense as I can verify the variable is defined, and was being used fine the first few times I ran grunt dev. Not sure what I've done / what I'm missing that's causing this variable to be missed. Any suggestions appreciated:

// less/_defaults/_colors.less
@transparent-light: transparent;
@transparent-dark: transparent;

$ grunt dev
Fatal error: SyntaxError: variable @transparent-light is undefined in src/theme/adapt-contrib-vanilla/less/project/theme-extras.less on line 25, column 1:
24 .header-color-mixin(background, background-inverted);
25 .header-color-mixin(transparent-light, font-color);
26 .header-color-mixin(transparent-dark, font-color-inverted);

FW: v5.17.7
adapt-contrib-vanilla: v5.7.2

This is the problem block, which hasn't been changed:

.header-color-mixin(background, background-inverted);
.header-color-mixin(transparent-light, font-color);
.header-color-mixin(transparent-dark, font-color-inverted);

.header-color-mixin(@color, @color-inverted) {

.header-color.@{color} {
  .menu,
  .page {
    &__header {
      background-color: @@color;
    }
  }
  .menu,
  .page {
    &__title,
    &__subtitle,
    &__body,
    &__body a,
    &__instruction,
    &__instruction a {
     color: @@color-inverted;
    }
  }
}

}

Guy Willis

@guywillis

You may have an error elsewhere in the css and this is a red herring message

Sam Howell

@5am_gitlab

@guywillis Thanks, i'll investigate some more when I can. For now I've just redefined the vars in theme-extras.less to ensure the mixin has them.

Guy Willis

@guywillis

it's strange that it worked for a time and then not - potentially an open variable in _colors.less?

Sam Howell

@5am_gitlab

@guywillis Well, that was a bit of a needle in a haystack! It seems you were right. The culprit was: @offwhite: #f6f6f6 (without the semicolon).

Chuck Lorenz

@chucklorenz

@guywillis @kirsty-hames Totally understand the contrast rationale behind updating Vanilla's colors--supported the PR with a +1 myself. But I'd encourage a color refresh in the future. The darken 20% (e.g., selected) is nearing black. I don't want to see us stray from Adapt "brand" colors, but maybe a designer could leisurely review all colors (including drawer and popups colors) and find a palette that is less heavy as we darken 10% and 20%.