I would like an assortment of tweaks to the theming of this page. See annotated image attached below. Here is the list of what is in the image:
Add dropdown for date, so there will be three buttons above each text. (Adding a third button will, I think, also make the buttons look better over the text without borders.)
In the date button, list dates in numerical order, but display them as text.
Put 1em padding below buttons.
Make buttons say "Select text" "Select page" and "Select date" by default.
Remove all black borders.
Put some white space padding to the right of the vertical scroll bar in the center.
Put a right-left scroll bar at the top (there is already one at the bottom).
Add dropdown for date, so there will be three buttons above each text. (Adding a third button will, I think, also make the buttons look better over the text without borders.)
I wrongly assumed that the dates would be used in much the same way as page breaks to be targeted (just with different text). In looking at the generated HTML there is no identifiers generated for dates. I can't seem to find them in the XSLT's either. For example the following.
<span class="underline ">
<span class="">
<span class="settlement village" title="Bambarre. Also Bambare, Kabambare, and Kabambarre. Village in Maniema, an eastern region in present-day Democratic Republic of the Congo. Livingstone stayed there 21 September-1 November 1869, 19-26 December 1869, and 22 July 1870-16 February 1871, and wrote most of the 1870 Field Diary there.">Bambarre</span>
</span>, <span class="">25 <span class="sup doubleunderline ">th</span> August, 1870 </span>.
</span>
The date is broken among several elements and has no identifier for which I can link to in the output.
Re: dates -- that's easy to fix with the XSLT. I'll get it sorted and let you know. How would you like it outputted in the HTML? The original (TEI) will look like one of the following:
date
date when="1871-01-01"
date from="1871-01-01" to="1871-02-02"
I could make the date a class, so span class="date" and I can also spew out the when/from/to date info in that span however you like. As you can see, some dates will be unknown, so I could spew out something in those cases as well, for instance, "unknown"
Re: select text, sounds good for the other two; leave title as is.
Re: top scroll, let's see how the panes look once you've reduced the height and we may not need that.
Sounds good. However, note that the TEI only has the data-date, so you'd have to generate the data label from that. There may be a way to do this through the XSLT conversion, but that's definitely outside of my skill level -- though I could investigate if you like.
For the label, I assumed you'd be grabbing the text from the content of the tag? If we only have the data-date info I can just generate ISO dates like Jan 1st, 1871.
The TEI date tag will only have a numerical value for the date in the @when or @from or @to attributes, e.g. "1871-10-17". Note that sometimes it will be, YYYY-MM-DD, sometimes YYYY-MM, and sometimes just YYYY. There are also one or two negative dates for BC, e.g. "-600"
I will put each of value in the data-date field on the span, so in some cases you may have two values separated by a space, eg. span data-date="1871-10-12 1871-10-17".
The Livingstone text that's actually coded may not provide everything that we need, eg. "17th"
As a result, the text version that shows up in the dropdown would have to be generated based on the numerical value of the date that I provide in HTML. It sounds like you can do this, so that's good news.
The XSLT is now updated on the site and on all Github branches. Dates are now span class="data" data-date="[numerical date here]". Note that the data-date may have one or two values, if two separated by a space: "1871-10-12 1871-10-15". Also in some cases the date is unknown, in which case the value for data-date is "unknown"
K I updated the dev branch to have what you put on stage. What is the expected behvaior when we have multiple dates that are the exact same or for multiple Unknowns?
K I updated the dev branch to have what you put on stage. What is the expected behvaior when we have multiple dates that are the exact same or for multiple Unknowns?
Show each as a separate line to click, sequentially as they appear in transcript, so, for instance, if we have 1871-10-10 twice, then it should appear like this in the dropdown:
10 Oct. 1871
10 Oct. 1871
Ideally, if you could do something like the following, that'd be even better:
10 Oct. 1871 (1)
10 Oct. 1871 (2)
Also, note that in the drop down, I think it would be better if all dates appears in alphanumeric sequence (with unknown at the end) even if the dates are out of sequence in the transcript in some cases.
When there is a date range like "1871-10-12 1871-10-17" I assume you want it to display like: "12 Oct. 1871 - 17 Oct. 1871"?
Yes, except no space on either side the dash "12 Oct. 1871-17 Oct. 1871", that's good. However, if it turns out that this makes the drop down too long (and so interferes with mobile), then we could just show the two endpoints as separate entities:
I think most everything you did looks great, so thank you for that.
However, there are some additional adjustments I'd like:
There's something off with the date dropdown as the dates that show up in the dropdown are one behind what's actually in the transcription. So, for instance, the text has "1827" but the dropdown shows "1826"; the text has "17 Aug 1870" but the dropdown shows "16 August 1870".
Please modify how the dates are shown in the date drop down as follows:
a. No period after month name, so 1 Mar 1870
b. Use "Sept" rather than "Sep".
c. June and July can be written out in full.
d. Restore the space around a dash when there are multiple dates "16 Mar 1871 - 17 Mar 1871"
Please select the 1870 Field Diary text, then scroll down in the dates until you find "NaN BCE". This is a bug. The text says "-600" in the data-date so this should come up as 600 BC and be the first item in the dropdown.
When someone selects a date and the text scrolls to that date, could we have it show up highlighted in light gray or something like that?
Could you increase the height of the panes very slightly?
See attached screen shot for a few additional adjustments.
There's something off with the date dropdown as the dates that show up in the dropdown are one behind what's actually in the transcription. So, for instance, the text has "1827" but the dropdown shows "1826"; the text has "17 Aug 1870" but the dropdown shows "16 August 1870".
I can't seem to reproduce this one, can you provide a screen cap? Hmm seems like it might be due to the Date parser provided by javascript, it may be interpreting the dates as as UT hence why I wouldn't see the date difference. Is it possible you could generate the date values like so:
YYYY/MM/DD rather than YYYY-MM-DD
According to the standard that would then be interpreted in local time (to the viewer), rather than based on Universal Time.
Side note: The date select as it grows the size of it’s largest item (within a max range to keep it from breaking onto the next line). I can force it to be small in all cases regardless of the text content but then some items when selected will have their text cut off. The other issues are handled and deployed to stage.
On desktop, this now looks fantastic as is. I'll review again on the next pass for mobile, but right now just two small tweaks, please:
1) The dates are not quite in the right order in the dropdowns. Currently you have "year month day (# of times)", but the order should be "day month year (# of times)," so incorrect: 1870 Aug 24 (2); correct: 24 Aug 1870 (2).
Also for single digit days, please use just the single digit and no leading zero, so incorrect: 04; correct: 4 etc
2) See the screen shot below and note what happens to the critical edition dropdown at this width this is a bug. It shouldn't jump below the gray line.
For #2, see the bit I've circled. The top of this is going under to the gray line above.
Oh that's the fixed navigation bar appearing? It's fixed to the top of the browser so if you scroll further up or down you'll notice the page moves underneath it.
I would like an assortment of tweaks to the theming of this page. See annotated image attached below. Here is the list of what is in the image:
I wrongly assumed that the dates would be used in much the same way as page breaks to be targeted (just with different text). In looking at the generated HTML there is no identifiers generated for dates. I can't seem to find them in the XSLT's either. For example the following.
The date is broken among several elements and has no identifier for which I can link to in the output.
It doesn't really make sense for "Select text" since one is selected automatically by default. I can add it for the others though.
This isn't supported by any browser, I'll have to hack something in to achieve this, do you still want me to move forward with it?
Re: dates -- that's easy to fix with the XSLT. I'll get it sorted and let you know. How would you like it outputted in the HTML? The original (TEI) will look like one of the following:
date date when="1871-01-01" date from="1871-01-01" to="1871-02-02"
I could make the date a class, so span class="date" and I can also spew out the when/from/to date info in that span however you like. As you can see, some dates will be unknown, so I could spew out something in those cases as well, for instance, "unknown"
Re: select text, sounds good for the other two; leave title as is.
Re: top scroll, let's see how the panes look once you've reduced the height and we may not need that.
We can use data fields to do the value and also the label for example.
Then I could sort the dropdown by the
data-date
field and display thedata-label
field to the user in the select box.Sounds good. However, note that the TEI only has the data-date, so you'd have to generate the data label from that. There may be a way to do this through the XSLT conversion, but that's definitely outside of my skill level -- though I could investigate if you like.
I've set this up for data-date without a hitch, so once you let me know what you'd like to do re: data-label I can put up the new XSLT.
For the label, I assumed you'd be grabbing the text from the content of the tag? If we only have the
data-date
info I can just generate ISO dates like Jan 1st, 1871.The TEI date tag will only have a numerical value for the date in the @when or @from or @to attributes, e.g. "1871-10-17". Note that sometimes it will be, YYYY-MM-DD, sometimes YYYY-MM, and sometimes just YYYY. There are also one or two negative dates for BC, e.g. "-600"
I will put each of value in the data-date field on the span, so in some cases you may have two values separated by a space, eg. span data-date="1871-10-12 1871-10-17".
The Livingstone text that's actually coded may not provide everything that we need, eg. "17th"
As a result, the text version that shows up in the dropdown would have to be generated based on the numerical value of the date that I provide in HTML. It sounds like you can do this, so that's good news.
So, please put it in this form in the dropdown:
1 Jan. 1871
I'll try to update the XSLT a little later today.
The XSLT is now updated on the site and on all Github branches. Dates are now span class="data" data-date="[numerical date here]". Note that the data-date may have one or two values, if two separated by a space: "1871-10-12 1871-10-15". Also in some cases the date is unknown, in which case the value for data-date is "unknown"
The update was a snap btw.
K I updated the dev branch to have what you put on stage. What is the expected behvaior when we have multiple dates that are the exact same or for multiple Unknowns?
When there is a date range like "1871-10-12 1871-10-17" I assume you want it to display like: "12 Oct. 1871 - 17 Oct. 1871"?
Show each as a separate line to click, sequentially as they appear in transcript, so, for instance, if we have 1871-10-10 twice, then it should appear like this in the dropdown:
10 Oct. 1871 10 Oct. 1871
Ideally, if you could do something like the following, that'd be even better:
10 Oct. 1871 (1) 10 Oct. 1871 (2)
Also, note that in the drop down, I think it would be better if all dates appears in alphanumeric sequence (with unknown at the end) even if the dates are out of sequence in the transcript in some cases.
Yes, except no space on either side the dash "12 Oct. 1871-17 Oct. 1871", that's good. However, if it turns out that this makes the drop down too long (and so interferes with mobile), then we could just show the two endpoints as separate entities:
12 Oct. 1871 17 Oct. 1871
Ready for review on stage.
I think most everything you did looks great, so thank you for that.
However, there are some additional adjustments I'd like:
I can't seem to reproduce this one, can you provide a screen cap? Hmm seems like it might be due to the Date parser provided by javascript, it may be interpreting the dates as as UT hence why I wouldn't see the date difference. Is it possible you could generate the date values like so:
YYYY/MM/DD
rather thanYYYY-MM-DD
According to the standard that would then be interpreted in local time (to the viewer), rather than based on Universal Time.
Ah don't worry about the conversion to
/
I can do that in code.Good to know as this would have been difficult for me to do.
Ready for review on stage.
Side note: The date select as it grows the size of it’s largest item (within a max range to keep it from breaking onto the next line). I can force it to be small in all cases regardless of the text content but then some items when selected will have their text cut off. The other issues are handled and deployed to stage.
On desktop, this now looks fantastic as is. I'll review again on the next pass for mobile, but right now just two small tweaks, please:
1) The dates are not quite in the right order in the dropdowns. Currently you have "year month day (# of times)", but the order should be "day month year (# of times)," so incorrect: 1870 Aug 24 (2); correct: 24 Aug 1870 (2).
Also for single digit days, please use just the single digit and no leading zero, so incorrect: 04; correct: 4 etc
2) See the screen shot below and note what happens to the critical edition dropdown at this width this is a bug. It shouldn't jump below the gray line.
Number 1 is sorted and on stage, I'm not sure what's wrong in number 2?
#1 looks perfect!
For #2, see the bit I've circled. The top of this is going under to the gray line above.
Also, please explain how I build a Multi-Viewer page from scratch.
Oh that's the fixed navigation bar appearing? It's fixed to the top of the browser so if you scroll further up or down you'll notice the page moves underneath it.
I'll do that in another ticket.
OK, everything here looks resolved, so I'm closing this ticket.