Pa table header refresh #24

aschwanden1 · 2022-08-05T17:17:13Z

Hi everyone. I created several new directories (js, css, img, img_logos) and updated the references to all the stuff in those directories. Also, I've restyled the header and updated the look and feel of the tabs and overall site. Also, I've added a localstorage persistance layer which will be very easy to use. I've also implemented a new Vue Component called IntroBlurb. The idea that these blurbs would only be shown to the user until he/she decides to close them. Also, I've added configuration file, as we discussed, such that all the text strings will be configurable. So, if you don't like the intro blurbs or the Dashboard name, we can change them in the config file.

… framework. but sister directories are, despite having exactly the same permissions

…gurable from CONF. Plus put style.css in css directory and update links.

…th IntroBlurbs and used to hide/show and persist the intro blurbs'

hategan · 2022-08-06T04:07:57Z

I think this is a great start.

We might want to split this into multiple PRs. In principle, each PR should fix one problem or add one new feature.

There are two reasons for this. One is that large PRs are hard to review. The second is that it is hard to reach consensus when there are many unrelated things to consider. For example, having assets split into subdirectories is something that is fairly straightforward and could go straight in. Other things, such as theming, have historically required lots of discussion, and, in this case we'd want to get closer to the theme on the exaworks.org web site, so that part is not as ready to go in.

aschwanden1 · 2022-08-08T15:34:59Z

Hi Mihael,

could we hold off on the exaworks themeing project for now? since that is a lower priority.

I can make smaller pull requests in the future, as you suggested.

aschwanden1 · 2022-08-08T17:23:35Z

Hi Mihael,

I have an idea. Maybe we could just consider the styling changes provisional for now? Dan Laney and I are working towards a Sept 30th deadline. We want to be able to wow the potential new users.

Then, later on when we do the exascale reskin, I can meet up with you online to discuss the color scheme. that way you can approve it before I implement the reskin.

sound okay?

hategan · 2022-08-09T15:40:51Z

I have an idea. Maybe we could just consider the styling changes provisional for now?

I see no reason to commit something that we plan not to use.

hategan · 2022-08-09T15:41:53Z

I can make smaller pull requests in the future, as you suggested.

Are you planning to split this PR or would you like me to review it as is?

aschwanden1 · 2022-08-09T16:06:55Z

Please review as is. Thank you.

hategan

This looks good, but I think there are some things that shouldn't be merged. I added some comments inline.

hategan · 2022-08-09T16:26:44Z

README.md

+https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/
+
+the last step is:
+brew services start [email protected]


This is OS X specific. Perhaps that should be made more clear.

hategan · 2022-08-09T16:27:41Z

README.md

+cd ~/psi-j-testing-service; 
+python3 src/psij/testing/service.py 


Maybe this belongs in a README-dev.md document or under a section that specifies that this allows one to create a local development environment.

hategan · 2022-08-09T16:30:26Z

README.md

+
+then you can see it at this url:
+http://0.0.0.0:9909/summary.html


Not sure about 0.0.0.0. It seems to work, but, from what I understand, it's not meant to signify "loopback address", which is 127.0.0.1

hategan · 2022-08-09T16:31:29Z

README.md

There's both first person and third person here. Is this document meant for other people? If so, it may be a bit confusing.

hategan · 2022-08-09T16:32:21Z

src/psij/web/css/style.css

@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f0f0;
+    background-color: #ffffff;


As discussed, can we hold off on temporary style changes?

src/psij/web/js/lib.js

hategan · 2022-08-09T16:49:18Z

src/psij/web/js/localStorage.js

@@ -0,0 +1,79 @@
+//  Global Storage, shortcut for sqs.


What is the purpose of this library?

I needed persistence to prevent IntroBlurbs from showing up after the user has closed them. We can use it for many purposes.

That sounds unusual in that I'm not familiar with any sites that do this except in very special cases when required by law or some such (like cookies preferences). But those are quite annoying and intrusive. We could simply have a brief introductory text that users can ignore after reading it once and, in case they forget it, read it again.

Additionally, the code already has a library that saves settings in cookies, which is used to remember the summary view type and other settings.

hategan · 2022-08-09T16:52:42Z

src/psij/web/summary.html

+    <div class="highlightable button view-mode-group" id="view-mode-curated-sites" title="Curated Sites" onclick="setViewMode('curated-sites')">
+        <span class="material-icons">home</span>
+    </div>


Does the curated-sites view mode exist and is functional? If not, perhaps this belongs in another PR.

Not functional yet. Just a work in progress. Ok, i am commenting this out for future PR.

If the comment does not help understand the code, it should probably not be there.

hategan · 2022-08-09T17:05:00Z

src/psij/web/css/style.css

+#status-calendar tr:nth-child(even) td,
+tr:nth-child(even) th {
+    background-color: #f2f2f2;
+}


May I recommend Butterick's Practical Typography (https://practicaltypography.com/), in particular the sections on tables and grids? It's a good resource in general for creating readable textual content, but it applies in good measure to other things, like websites.

hategan · 2022-08-09T17:07:15Z

src/psij/web/css/style.css

+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;


Think of the view modes more like the "view as list" / "view as icons" in windows explorer and Finder. They are not tabs, since the information doesn't change. What changes is how the same information is represented.

aschwanden1 added 17 commits August 3, 2022 11:35

update documentation

008f85b

Fix customization.js, instance directory was not accessible by cherry…

7243e79

… framework. but sister directories are, despite having exactly the same permissions

style buttons and tabs

48a9532

breadcrumb styling to give it a more clean and professional look

1650109

merge

0ffb581

add styling for the main summary table

08aa9f3

debug assistance for resp object

552f594

testing commit

ee7795f

Add configurations for curated sight and intro blurbs

78e0e51

added new home tab for new curate sites page

53c7db3

update mongoDB restore documentation

60b7def

Dashboard title styling and CSS in header, as well as making it confi…

6c3ae41

…gurable from CONF. Plus put style.css in css directory and update links.

Implementation of intro and outro blurbs in a vue component

8a1481e

Implement persistance layer reusable for many uses. Now integrated wi…

5036863

…th IntroBlurbs and used to hide/show and persist the intro blurbs'

Update intro text to give example of intro blurbs we could use

c76829b

move lib.js to js directory and update references

26fa56a

move imgs to img directory and update references

279d722

aschwanden1 requested a review from hategan August 5, 2022 17:17

aschwanden1 added 4 commits August 5, 2022 20:37

RowAccordian setup and implementation, initial

e3fedf5

Update curated sites

a87335d

Implement property passing and toggle functionality

93e5100

Refactor summary site view into its own page

3f95ca3

aschwanden1 requested a review from kylechard August 8, 2022 19:27

hategan requested changes Aug 9, 2022

View reviewed changes

aschwanden1 added 8 commits August 9, 2022 11:57

Documentation changes, as per code review

86ad558

remove extraneous debug code

0bc50c0

remove curated sites

0ed5fa9

Removing ALL CSS styling changes.

165860c

IntroBlurb styling and banner position

0c539f0

delete localstorage file

45786e2

rename summarySiteView.js

fe280cc

remove JSON not used yet

1391065

hategan mentioned this pull request Jan 24, 2023

Pa accordian #36

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pa table header refresh #24

Pa table header refresh #24

aschwanden1 commented Aug 5, 2022

hategan commented Aug 6, 2022

aschwanden1 commented Aug 8, 2022

aschwanden1 commented Aug 8, 2022 •

edited

Loading

hategan commented Aug 9, 2022

hategan commented Aug 9, 2022

aschwanden1 commented Aug 9, 2022

hategan left a comment

hategan Aug 9, 2022

hategan Aug 9, 2022

hategan Aug 9, 2022

hategan Aug 9, 2022

hategan Aug 9, 2022

hategan Aug 9, 2022

aschwanden1 Aug 9, 2022

hategan Aug 9, 2022

hategan Aug 9, 2022

aschwanden1 Aug 9, 2022

hategan Sep 16, 2022

hategan Aug 9, 2022

hategan Aug 9, 2022

		cd ~/psi-j-testing-service;
		python3 src/psij/testing/service.py


		then you can see it at this url:
		http://0.0.0.0:9909/summary.html

Pa table header refresh #24

Are you sure you want to change the base?

Pa table header refresh #24

Conversation

aschwanden1 commented Aug 5, 2022

hategan commented Aug 6, 2022

aschwanden1 commented Aug 8, 2022

aschwanden1 commented Aug 8, 2022 • edited Loading

hategan commented Aug 9, 2022

hategan commented Aug 9, 2022

aschwanden1 commented Aug 9, 2022

hategan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aschwanden1 commented Aug 8, 2022 •

edited

Loading