# Unofficial mobile friendly package website exploration

**URL:** <https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180>\
**Category:** Show and Tell\
**Created:** [February 14, 2020, 4:45pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180 "2020-02-14T16:45:52Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 14, 2020, 4:45pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/1 "2020-02-14T16:45:52Z")

</div>

I’m running a mobile friendly experimental and custom version of the `package.elm-lang.org` frontend on my proxy:

Light theme: [elm.dmy.fr](http://elm.dmy.fr)  
Dark theme: [dark.elm.dmy.fr](http://dark.elm.dmy.fr)

It uses the official website backend, just replacing the `elm.js`, `style.css` and `favicon.ico` files.

You can find a brief list of new features and bug fixes in the following gist:  
[New features and bug fixes](https://gist.github.com/rlefevre/804ebb70ab902a4929ade8e81278e351)

The main ones are:

- responsive design
- packages ranking
- query saved in URL
- sticky scrollable modules navigation bar
- authors page
- click function/type/operator to go to source
- overflows fixed

For now, this is a just personal exploration to check bug fixes, test and improve new features, so even if some of them might potentially inspire some modifications to the official website, there is absolutely no guarantee and it seems wiser to avoid any expectation. I may also change or break things without prior notice.

Feedback is very welcome.

---

<div class="post-metadata">

**Author:** ![MartinS](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/martins/32/3137_2.png) [@MartinS](https://discourse.elm-lang.org/u/MartinS)\
**Post date:** [February 15, 2020, 3:19pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/2 "2020-02-15T15:19:32Z")

</div>

Very cool!

One thing I miss is that elm-packages (when using the elm-package-info extension you made) has the About info shown on the side panel. I understand that won’t fit in a mobile view, but when viewing a package on a desktop screen, could that information still be shown? It’s very convenient to have that info visible immediately rather than needing to jump to another page.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/4/4aaeeb20d40efaf0ded920b74ac3400c90e0f042.png)

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 15, 2020, 3:26pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/3 "2020-02-15T15:26:31Z")

</div>

A variant of the “About” page is currently in test for the official website and will most likely be available soon.

We have decided to use this approach because the information available there is mostly useful when selecting a package, but not much or not at all when consulting the documentation. As we read documentation much more than we select a package, it made sense to favor a clean and uncluttered package documentation page.

I know that in some cases, having the information available directly would be more productive, but I think overall the selected solution is a reasonable compromise.

---

<div class="post-metadata">

**Author:** ![MartinS](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/martins/32/3137_2.png) [@MartinS](https://discourse.elm-lang.org/u/MartinS)\
**Post date:** [February 15, 2020, 3:38pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/4 "2020-02-15T15:38:34Z")

</div>

In my case, I usually visit the package website to find some package I want to install. For reading documentation, I use intellij-elm which shows module and function documentation inside the editor so there isn’t as much of a need to visit the package website for referencing documentation.

I guess this isn’t a common use case for beginners so the compromise makes sense to show package info only in an about page.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 15, 2020, 3:42pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/5 "2020-02-15T15:42:25Z")

</div>

Exactly. I understand your use case but as you guessed, this is most likely not the most common one.

Remember that Elm is minimalist in its design, and this also leaks out in some web site design decisions.

For your specific use case, maybe you could use [https://elm-greenwood.com/](https://elm-greenwood.com/).  
All the “About” information is available directly in the search page when clicking a card, so this might be even more efficient. Packages are not ranked though and the design needs to be refined.

If some features are missing, contributions are welcome.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 15, 2020, 6:36pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/6 "2020-02-15T18:36:45Z")

</div>

I reworked the dark theme which was not satisfying.  
Hopefully contrast is better without sacrificing on reducing eye strain.

---

<div class="post-metadata">

**Author:** ![ursi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ursi/32/3166_2.png) [@ursi](https://discourse.elm-lang.org/u/ursi)\
**Post date:** [February 15, 2020, 6:37pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/7 "2020-02-15T18:37:25Z")

</div>

Any chance you could implement a ToC for the types and functions in a module? The’s one of the features I really wish the official site had.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 15, 2020, 6:41pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/8 "2020-02-15T18:41:09Z")

</div>

There is an experimental hidden feature that list all modules functions and types when entering a space in the `Modules` search box.

I can’t think of a better way to list those at the moment, so this was a way to introduce the feature without risking any drawback for those that don’t care about it.

---

<div class="post-metadata">

**Author:** ![ursi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ursi/32/3166_2.png) [@ursi](https://discourse.elm-lang.org/u/ursi)\
**Post date:** [February 15, 2020, 6:47pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/9 "2020-02-15T18:47:22Z")

</div>

Oh wow, right at the end, I think I read nearly everything but that haha. Nice!

> I can’t think of a better way to list those at the moment, so this was a way to introduce the feature without risking any drawback for those that don’t care about it.

Isn’t there a big chunk of empty space on the left side? (I see that that’s not the case currently, but I swear it was when I clicked on it 5 minutes ago)

edit: yeah the site is currently not working right.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 15, 2020, 9:23pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/10 "2020-02-15T21:23:09Z")

</div>

> [@ursi](#):
>
> edit: yeah the site is currently not working right.

Yeah, the official website was updated, and its endpoints changed. It should be fixed now.

> [@ursi](#):
>
> Isn’t there a big chunk of empty space on the left side?

It depends on the width of the window, which is already pretty large for certain packages. Also, I don’t think that just having some space is a solution by itself, as some functions/types can be very big, for example [Css - elm-css 18.0.0](https://dark.elm.dmy.fr/packages/rtfeldman/elm-css/latest/Css#LengthOrNumberOrAutoOrNoneOrContent) which would push everything else a lot to the right, and I also want to avoid a cluttered interface to stay faithful to the official website.

---

<div class="post-metadata">

**Author:** ![ursi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ursi/32/3166_2.png) [@ursi](https://discourse.elm-lang.org/u/ursi)\
**Post date:** [February 16, 2020, 5:10am UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/11 "2020-02-16T05:10:21Z")

</div>

I see. Well one improvement I’ll suggest to the current method of getting the ToC is to automatically scroll it to the module you’re currently on.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 16, 2020, 1:18pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/12 "2020-02-16T13:18:47Z")

</div>

> [@ursi](#):
>
> Well one improvement I’ll suggest to the current method of getting the ToC is to automatically scroll it to the module you’re currently on.

Excellent idea. I have added it for any query. Thank you!

---

<div class="post-metadata">

**Author:** ![ursi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ursi/32/3166_2.png) [@ursi](https://discourse.elm-lang.org/u/ursi)\
**Post date:** [February 16, 2020, 4:11pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/13 "2020-02-16T16:11:45Z")

</div>

Awesome! bookmarking that dark theme as my new go-to! 👍

---

<div class="post-metadata">

**Author:** ![rob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rob/32/589_2.png) [@rob](https://discourse.elm-lang.org/u/rob)\
**Post date:** [February 17, 2020, 2:58pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/14 "2020-02-17T14:58:29Z")

</div>

Very nice! I’m particularly impressed with how the type signatures of the documentation section headers break and align.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 17, 2020, 3:41pm UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/15 "2020-02-17T15:41:03Z")

</div>

> [@rob](#):
>
> I’m particularly impressed with how the type signatures of the documentation section headers break and align

Most of this algorithm was already done by the official website. I just fixed a few bugs, made it take a dynamic width, and allowed the layout to break lines (with an indentation) if things go wrong (zoom, bug or non-default font) or if the width is too small.

---

<div class="post-metadata">

**Author:** ![gampleman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/gampleman/32/43_2.png) [@gampleman](https://discourse.elm-lang.org/u/gampleman)\
**Post date:** [February 18, 2020, 9:26am UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/16 "2020-02-18T09:26:48Z")

</div>

Sometimes the algorithm still produces [results that don’t look that nice](https://dark.elm.dmy.fr/packages/gampleman/elm-visualization/latest/Scale#clamp):

 ![Screenshot 2020-02-18 at 09.26.00](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/c/cf240e49134f97dbb85aa7e6f4853a2ee070c4e7.png)

The `result` here looks confusingly aligned as well as the two records not being aligned the same.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [February 18, 2020, 9:47am UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/17 "2020-02-18T09:47:51Z")

</div>

Yes, I think there is still a width computation bug remaining with records, but I have not yet had the time to investigate this one. I noticed it with `Browser.application` too.

I will have a look later. I should also add some fuzzy testing.

Note that the `result` alignment is due to word wrapping to avoid overflow. This is a last resort workaround in case something goes wrong. Here the algorithm should have used a multi-line type for `convert`.

Lastly the records not being aligned is due to the `->` for the second one. I don’t think fixing the bug would change this, the result would be:

 ![Screenshot_20200218-130656](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/7/7fb7421c9aabe4f2f5eda0813514cd41cf3d291c.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 28, 2020, 9:47am UTC](https://discourse.elm-lang.org/t/unofficial-mobile-friendly-package-website-exploration/5180/18 "2020-02-28T09:47:53Z")

</div>

Closed on February 28, 2020, 9:47am UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.