bootstrappifying and cleaning up UI, will look good on a mobile phone

[erickr]

Just tested this, looks very good!

Although, imho, I think the list of notes should be in something like a left pane when using it on a desktop, for faster navigation between notes. On mobile the notes could perhaps be accessible by swiping horizontally to get to a list of notes in the selected notebook.

A bredcrumb might be good information as well, like / /

One issue I noticed was that if you have so many notes in a notebook that the dropdown is higher than the screen, then its a bit hard to take the ones at the bottom.

[tony-o]

@erickr thanks for taking a look! I'll take a pass at that on the next iteration, I'm working on integrating a wysiwyg type editor for editing notes. Great point on the notes and notebooks listing

[tony-o]

@erickr took your recommendation and moved the notes to a left nav that collapses on a small screen. also made it so, while collapsed, swipe gestures can be used to show the notes.

[erickr]

Sounds great, will try it tomorrow night!

[charlesthomas]

This looks great, but I do have some feedback I'd like you to take a look at before I merge. I also found a couple of deal-breaker bugs.

Major issues

1. If the list of notebooks is larger than the list of notes, then the notebook list from the dropdown menu gets truncated weirdly.
2. The "<Note" button only appears when there's already a note open (I assume you added this just to NoteHandler, and not also to NotebookHandler). This means that if you don't already have a note open, you have to go up to the menu and click the notes dropdown to get to your notes.
3. Additionally, the "<Note" button is jammed into the star and edit buttons. There should be some vertical spacing there (or maybe "<Note" should show up to the left of the star, not above it?)

Minor

1. Search should be to the left of the Notebooks and Notes dropdowns. This should also put it above them in a smaller window
2. It would be nice if the logo appeared in the top menu bar somewhere - maybe on the far right?
3. If the notes list on the left disappears b/c of responsive, then in the Notebook view (Notebook Handler), then the list of notes should move to the main content area, since it's blank otherwise.
4. We should make the input in "Edit" mode responsive, if we can -- it's too big in a small window and too small in a desktop-sized window</li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/charlesthomas"><img src="https://avatars.githubusercontent.com/u/1727467?v=4" />charlesthomas</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>Holy crap! I only just now saw that you dumped in 25,000 + of JS files. <strong>I absolutely do not want these in the repo.</strong> They are not magpie code, and should not be treated as such. They are dependencies.</p> <p>Currently, and external JS dependencies that are needed are just loaded through their various CDNs, which is probably a bad practice (magpie will look terrible if the user doesn't have an internet connection when they open it, if the static stuff isn't already cached.)</p> <p>We should think about how to handle dependencies better. I think a good approach might be to check for their presence on launch, and download anything that's missing into the static dir. (We should add them to .gitignore if we do this, so devs don't accidentally put them into PRs.) There might be a way to do this as part of <code>setup.py</code>. I'll look into that.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Erwyn"><img src="https://avatars.githubusercontent.com/u/206743?v=4" />Erwyn</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>Can I also suggest use of git submodules? so that we can fix versions if any breaking upgrade happens ? And then we could use building job that gather the different dependencies and package everything?</p> <p>What's your opinion?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tony-o"><img src="https://avatars.githubusercontent.com/u/2029968?v=4" />tony-o</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>@Erwyn suggestion taken and implemented in this last batch, thank you</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tony-o"><img src="https://avatars.githubusercontent.com/u/2029968?v=4" />tony-o</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>@charlesthomas points 1, 2, and the extra libs being IN the repo has been pushed -</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/erickr"><img src="https://avatars.githubusercontent.com/u/89317?v=4" />erickr</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>I tested this again, lots of my previous suggestions was now there, quickly done! </p> <p>Perhaps we need to re-arrange the buttons a bit, but this seems really promising. Perhaps move the edit, star,delete buttons onto the breadcrumb-bar? There will be a history button as well soon hopefully for example, or we could perhaps replace it with a dropdown menu which could accomodate more options in the future.</p> <p>Will be back with more comments, nice to see your work!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/charlesthomas"><img src="https://avatars.githubusercontent.com/u/1727467?v=4" />charlesthomas</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>@tony-o This PR doesn't work. JS libs are missing - am I supposed to download them manually at this stage?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/erickr"><img src="https://avatars.githubusercontent.com/u/89317?v=4" />erickr</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>@charlesthomas did you run git submodule init and git submodule update ? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dangayle"><img src="https://avatars.githubusercontent.com/u/129611?v=4" />dangayle</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>Instead of git submodules, you might want to look into using Bower as a front end asset manager. It functions similarly to submodules but is easier to manage and makes it much more clear and specific what scripts versions you are using.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tony-o"><img src="https://avatars.githubusercontent.com/u/2029968?v=4" />tony-o</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>Appears my email didn't make it into the thread.</p> <p>@dangayle what does Bower provide that isn't supplied by git submodules? It looks like it just adds the requirement of NPM+Node.js. While I like JS/node, I fail to see the value that Bower would add here</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/erickr"><img src="https://avatars.githubusercontent.com/u/89317?v=4" />erickr</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>Could we use pip and fanstatic to include the js-dependencies, that will avoid git submodules and also bower as dangayle suggested. Seems like it would be more pure python which might be more conservative on the requirements side. I havent tried it but read this answer, <a href="http://stackoverflow.com/a/19525324">http://stackoverflow.com/a/19525324</a> which linked to <a href="http://www.fanstatic.org/en/latest/libraries.html">http://www.fanstatic.org/en/latest/libraries.html</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tony-o"><img src="https://avatars.githubusercontent.com/u/2029968?v=4" />tony-o</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>@erickr - it looks like Fantastic still keeps the JS as part of the code base which is what @charlesthomas had me remove initially, am I mis-skimming the Fantastic documentation?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/erickr"><img src="https://avatars.githubusercontent.com/u/89317?v=4" />erickr</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>@tony-o as I said I havent tried, but if that is the case I think it defeats the purpose of it, might have to test it to verify. I figured it should do something like phps composer and just install them on pip install into some vendor-folder or similar.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Erwyn"><img src="https://avatars.githubusercontent.com/u/206743?v=4" />Erwyn</a> commented <strong> 10 years ago</strong> </div> <div class="markdown-body"> <p>I am sensible at @dangayle argument.</p> <p>I don't know what's the future of Magpie, but we can imagine that in a near future, we'll have a backend in python and a pure javascript frontend (maybe angularjs ?). If this is the way it is going to evolve then yes, bower is making more sense. At the moment, it is still fresh, but, maybe thinking about it?</p> <p>If so, let's open a thread about it!</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>