Commit 6dad6aea authored by Leon Arnott's avatar Leon Arnott
Browse files

Added a responsive <meta> tag to the HTML template, along with some very basic media queries.

You might remember that responsive CSS was present in 1.2.4 but removed in 2.0.0, but all that ever did was change the font size, which wasn't intuitive or helpful most of the time.

Also fixed a bug where HookNames could select text inside transitioning-out passages.

Closes #151.
parent 7b92f6378bb8
......@@ -32,6 +32,7 @@ Documentation is at http://twine2.neocities.org/. See below for compilation inst
* Fixed a bug where `(hover-style:)` couldn't actually override the default hover colour for links of any kind, due to a CSS conflict.
* Fixed a bug where certain changers, like `(for:)`, caused a crash when attached to a command (like a `(print:)` macro, or a passage link).
* Fixed a bug where closing an `(alert:)`, `(confirm:)` or `(prompt:)` dialog box when there was an `(event:)` hook in the passage would cause a crash.
* Fixed a bug where revision changers like `(replace:)`, as well as `(enchant:)`, could affect text inside transitioning-out passages (including the passage itself, with `?passage`), which was noticeable when `(t8n-depart:)` was used with a passage link and the incoming passage contained one of those macros.
* Fixed a bug where trying to use datanames with certain unusual types of data (changers, commands, datatypes) would give a bad Javascript error message instead of the intended error message.
* Fixed a bug where the CSS used to position the new pure HTML dialogs didn't work on certain old browser versions.
* Now, consecutive line breaks (which Harlowe reduces the cumulative height of) at the start of a passage are no longer the wrong height while that passage transitions in. (To handle this, consecutive line breaks are now made into `<tw-consecutive-br>` elements instead of `<br data-cons>` elements.)
......@@ -81,6 +82,11 @@ Documentation is at http://twine2.neocities.org/. See below for compilation inst
* `(alert:)` has been renamed to `(dialog:)`, retaining the original name `(alert:)` as an alias for it. Moreover, it can now accept any amount of link text, as well as a bound variable to set to the text of whichever link you click. Also, changers like `(t8n:)` can now be attached to the `(dialog:)` macro.
* `(reload:)` has been renamed to `(restart:)`, retaining the original name as an alias for it.
* `(rgb:)` now accepts fractional values for the R, G, and B components.
* The default CSS for `<tw-sidebar>` now sets its `display` to `flex` and gives it `flex-direction:column; justify-content:space-between;`. This should have no effect on its appearance in usual circumstances (see below).
* Added a responsive `<meta>` tag to the HTML template, along with some very basic media queries. You might remember that responsive CSS was present in 1.2.4 but removed in 2.0.0, but all that ever did was change the font size, which wasn't helpful most of the time. These media queries now only perform the following when the viewport width is below or at 576px (the cutoff used by Bootstrap):
* `<tw-story>`'s padding changes to `5% 5%` instead of `5% 20%`.
* `<tw-sidebar>` loses `left: -5em; width: 3em; position:absolute; flex-direction:column;`, thus causing it to be placed atop the passage horizontally.
* `<tw-dialog>` loses `max-width: 50vw;`.
* Made the syntax highlighting dark mode colours 50% brighter.
* Markup that's inside the verbatim markup will no longer be syntax-highlighted as if it was outside it.
......
......@@ -286,8 +286,14 @@ define(['jquery', 'utils', 'utils/renderutils', 'utils/operationutils'], ($, Uti
return ret.add(reducer(hooks.call(this.selector.data, section), this.property));
}
else {
ownElements = dom.add(dom.parentsUntil(Utils.storyElement.parent()))
.findAndFilter(hookToSelector(this.selector.data));
/*
The following construction ensures that parents up to <tw-story> are added (so that ?page can
select <tw-story>) but that the selector is not found in <tw-story>'s arbitrary descendants
(and thus that transitioning out <tw-passage>s' contents are included).
*/
const s = hookToSelector(this.selector.data);
ownElements = dom.findAndFilter(s).add(dom.parentsUntil(Utils.storyElement.parent()))
.filter(s);
}
if (this.property) {
ret = ret.add(reducer(ownElements, this.property));
......
......@@ -8,6 +8,7 @@
const enclosedText = "This markup gives the enclosed text ";
const producesBooleanTrueIf = c => `The <b>"${c}" operator</b> produces the boolean value \`true\` if `;
const otherwiseFalse = ` Otherwise, it produces \`false\`.`;
const variableInProse = `If they contain strings, numbers, commands or changers, you can place them directly in your prose to display the value, run the command, or apply the changer.`;
const lambdaClause = c => `The keyword <b>"${c}"</b> makes the code on the right into a <b>"${c}" lambda clause</b>. `;
const tooltipMessages = {
hr: "This is a <b>horizontal rule</b>. It extends across the entire passage width (or the column width, if it's in a column).",
......@@ -48,8 +49,8 @@
twineLink: ({passage}) => `This is a link to the passage "${passage}". Links, like hooks and commands, can have changer values attached to the left.`,
br: ``, // Display nothing,
url: ``,
variable: `This is a <b>story-wide variable</b>. After this has been set to a data value, it can be used anywhere else in the story. Use these to store data values related to your story's game state, or changers that are commonly used.`,
tempVariable: `This is a <b>temp variable</b>. It can be used in the same passage and hook in which it's first set to a data value. Use these to store values temporarily, or that won't be needed elsewhere.`,
variable: `This is a <b>story-wide variable</b>. After this has been set to a data value, it can be used anywhere else in the story. Use these to store data values related to your story's game state, or changers that are commonly used. ` + variableInProse,
tempVariable: `This is a <b>temp variable</b>. It can be used in the same passage and hook in which it's first set to a data value. Use these to store values temporarily, or that won't be needed elsewhere. ` + variableInProse,
macroName: (_,[,parent]) => tooltipMessages.macro(parent),
grouping: `Use these <b>grouping brackets</b> to ensure operations are performed in a certain order. Code in brackets will be computed before the code adjacent to it.`,
property: ({type, name}) => (name ? `This retrieves the data stored at <b>the \`${name}\` ${
......
......@@ -9,9 +9,9 @@ tw-dialog {
color: $color;
background-color: $background-color;
display:block;
max-width: 50vw;
max-height: 75vh;
overflow: hidden;
@media (min-width: 576px) {
max-width: 50vw;
}
input[type=text] {
font-size: inherit;
......
......@@ -68,7 +68,10 @@ tw-story {
/*
The <tw-story>'s default distance from the top and bottom of the page is 5%.
*/
padding: 5% 20%;
padding: 5% 5%;
@media (min-width: 576px) {
padding: 5% 20%;
}
/*
This is necessary to make certain CSS animations (mainly slide-left) work with passages.
......@@ -142,11 +145,15 @@ tw-passage {
when the story begins.
*/
tw-sidebar {
left: -5em;
width: 3em;
position:absolute;
text-align:center;
display:block;
@media (min-width: 576px) {
left: -5em;
width: 3em;
position:absolute;
@include flex-direction(column);
}
text-align: center;
@include flexbox;
@include justify-content(space-between);
}
/*
......
......@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>{{STORY_NAME}}</title>
{{CSS}}
</head>
......
......@@ -28,6 +28,12 @@ describe("enchantment macros", function () {
expect("[]<foo|("+name+":?foo, (click:'bar'))").not.markupToError();
});
if (name === "change") {
it("doesn't affect transitioning-out passages", function() {
createPassage("("+name+":?foo, (click:'bar'))",'garply');
var p = runPassage('[]<foo| (t8n-depart:"dissolve")[[garply]]');
p.find('tw-link').click();
expect($('tw-enchantment').length).toBe(0);
});
it("only changes hooks earlier than it", function() {
var p = runPassage("[]<foo|(change:?foo,(color:'#800000'))[]<foo|");
expect(p.find('tw-hook:first-child').css('color')).toMatch(/(?:#800000|rgb\(\s*128,\s*0,\s*0\s*\))/);
......
......@@ -52,6 +52,12 @@ describe("revision macros", function() {
var p = runPassage("(set:_a to 1)[(set:_a to 2)]<bar|("+name+":?bar)[(print:_a)]");
expect(p.text()).toBe('2');
});
it("doesn't affect transitioning-out passages", function() {
createPassage("("+name+":?foo)[grault]",'garply');
var p = runPassage('[baz]<foo| (t8n-depart:"dissolve")[[garply]]');
p.find('tw-link').click();
expect($('tw-transition-container.transition-out [name="foo"]').text()).toBe('baz');
});
});
describe("given multiple same-named hooks", function() {
it(name+"s to each selected hook", function() {
......@@ -222,6 +228,12 @@ describe("revision macros", function() {
var p = runPassage("(set:_a to 1)[(set:_a to 2)]<bar|(replace:?bar)[(print:_a)]");
expect(p.text()).toBe('2');
});
it("doesn't affect transitioning-out passages", function() {
createPassage("(replace:?foo)[grault]",'garply');
var p = runPassage('[baz]<foo| (t8n-depart:"dissolve")[[garply]]');
p.find('tw-link').click();
expect($('tw-transition-container.transition-out [name="foo"]').text()).toBe('baz');
});
});
describe("given multiple same-named hooks", function() {
it("replaces each selected hook", function() {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment