diff --git a/la_chariotte/order/templates/order/grouped_order_add_items.html b/la_chariotte/order/templates/order/grouped_order_add_items.html index 9590112..6e59b56 100644 --- a/la_chariotte/order/templates/order/grouped_order_add_items.html +++ b/la_chariotte/order/templates/order/grouped_order_add_items.html @@ -7,8 +7,12 @@ {% block content_title %}Ajouter des produits à votre commande groupée{% endblock %}
Lieu : {{ grouped_order.place }}
+{{ grouped_order.place }}
{% endif %} -Date de livraison : {{ grouped_order.delivery_date }}
-Date limite de commande : {{ grouped_order.deadline }}
++ {{ grouped_order.deadline }} +
++ {{ grouped_order.delivery_date }} +
+ {% if user == grouped_order.orga %} - Gestion de la commande groupée + Gestion de la commande groupée + {% else %}Organisateur·ice : {{ grouped_order.orga }}
Contacter l'organisateur·ice @@ -94,7 +100,8 @@Lieu : {{ grouped_order.place }}
+{{ grouped_order.place }}
{% endif %} -Date de livraison : {{ grouped_order.delivery_date }}
-Date limite de commande : {{ grouped_order.deadline }}
++ {{ grouped_order.deadline }} +
++ {{ grouped_order.delivery_date }} +
Pour partager cette commande, il vous suffit de copier ce lien et de l'envoyer à vos connaissances :
- + {% endif %}Pour vous aider à distribuer les produits le jour J, vous pouvez imprimer la liste des commandes :
- Liste des commandes + + Liste des commandes +Produits commandés
{% if grouped_order.item_set.all %}{{ gr_order }} | +{{ gr_order }} | {{ gr_order.delivery_date }} | {{ gr_order.deadline }} | {{ gr_order.order_set.count }} | -Détail | Organisation | ++ + + + + | {{ gr_order.delivery_date }} | {{ gr_order.deadline }} | {{ gr_order.order_set.count }} | -Détail | Organisation | - ++ + + + + | {% endfor %}
When using icons in your UI, there are manual techniques and ways to help assistive technology either ignore or better understand {{ site.forkawesome.name }}.
+ +If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true"
to your {{ site.forkawesome.name }} markup.
+ If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this: +
+ +
+ The simplest way to provide a text alternative is to use the aria-hidden="true"
attribute on the icon and to include the text with an additional element, such as a <span>
, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title
attribute on the icon to provide a tooltip for sighted mouse users.
+
+ In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span>
or similar. For instance, simply adding the aria-label
attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title
attribute or a custom tooltip solution.
+
title
attribute to provide a native mouse tooltip
+ + Modern versions of assistive technology, like screen readers, will read CSS generated content (how {{ site.forkawesome.name }} icons are rendered), as well as specific Unicode characters. When reading our default markup for rendering icons, assisistive technology may have the following problems. +
+ ++ While the scenarios and techniques here help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend. +
+ ++ We'll continue to work on these under the larger topic of accessibility, but in the meantime, let us know if any bugs or issues. +
++ Having trouble getting {{ site.forkawesome.name }} up and running? Something not working the way you think it should? +
++ Want to keep up with what's planned for {{ site.forkawesome.name }}? Check out our + projects on the GitHub repo. + And come help us achieve those goals. +
++ Found a problem with {{ site.forkawesome.name }}? Feel free to submit an issue on the GitHub project. But please keep the following in mind: +
++ New icons mostly start as requests by the + {{ site.forkawesome.name }} community on GitHub. Want to request a new + icon? Here are some things to keep in mind: +
+Icon request: icon-name
(e.g., Icon request: icon-car
).
+ + + Refreshing... + + + Saving. Hang tight! +
+ ++
+ + + +
+ ++ + Battery level: 50% +
++ With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text. +
+ +{% highlight html %} + + + + + + + + + + + +{% endhighlight %} + +{% highlight html %} + +Refreshing... + + +Saving. Hang tight! +{% endhighlight %} + +{% highlight html %} ++ + Loading example (with fa-spinner icon) + + + Loading (with fa-circle-o-notch icon) + + + Loading example (with fa-refresh icon) + + + Loading example (with fa-cog icon) + + + Loading example (with fa-spinner icon) +
+
+ Use the fa-spin
class to get any icon to rotate, and use fa-pulse
to have it rotate
+ with 8 steps. Works well with fa-spinner
, fa-refresh
, and fa-cog
.
+
+ Note: + Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See + issue #671 + for examples and possible workarounds. +
++ Note: CSS3 animations aren't supported in IE8 - IE9. +
++ + Example: basic icon + fa-camera-retro +
+
+ You can place {{ site.forkawesome.name }} icons just about anywhere using the CSS Prefix fa
and the icon's
+ name. Fork Awesome is designed to be used with inline elements (we like the <i>
tag for
+ brevity, but using a <span>
is more semantically correct).
+
+ + Delete + + Settings +
+
+
+ {{ site.forkawesome.name }}
Version {{ site.forkawesome.version }}
+
+ {{ site.forkawesome.name }} works great with the full range of Bootstrap components. +
+{% highlight html %} + + Delete + + Settings + + + {{ site.forkawesome.name }}+ + …tomorrow we will run faster, stretch out our arms farther… And then one fine morning— + So we beat on, boats against the current, borne back ceaselessly into the past. +
+
+ Use fa-border
and fa-pull-right
or fa-pull-left
for easy pull quotes or
+ article icons.
+
Anything you can do with CSS font styles, you can do with Font Awesome.
+Star Ratings (inspired by CSS Tricks)
+
+ Use fa-fw
to set icons at a fixed width. Great to use when different icon widths throw off alignment.
+ Especially useful in things like nav lists & list groups.
+
fa-lg
+fa-2x
+fa-3x
+fa-4x
+fa-5x
+
+ To increase icon sizes relative to their container, use the fa-lg
(33% increase), fa-2x
,
+ fa-3x
, fa-4x
, or fa-5x
classes.
+
Use fa-ul
and fa-li
to easily replace default bullets in unordered lists.
+ normal
+ fa-rotate-90
+ fa-rotate-180
+ fa-rotate-270
+ fa-flip-horizontal
+ fa-flip-vertical
+
+ To arbitrarily rotate and flip icons, use the fa-rotate-*
and fa-flip-*
classes.
+
+ To stack multiple icons, use the fa-stack
class on the parent, the fa-stack-1x
+ for the regularly sized icon, and fa-stack-2x
for the larger icon. fa-inverse
+ can be used as an alternative icon color. You can even throw larger icon classes on the parent
+ to get further control of sizing.
+
fa-spin
class. Check out the
+ spinning icons example.
+ {{ site.forkawesome.tagline }}
+{{ jumbotron_p }}
+{{ jumbotron_p }}
+ {% endif %} +fa-[name]-[shape]-[o]-[direction]
++ A desire for better icon naming consistency and predictability are at the heart + of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict + the names of variants. +
+Solid icons as the base variant
+Outlined version of previous modifier
+Circle under previous modifier
+Square under previous modifier
+Directional modifier always at the end
+Alternative to the original
+Horizontal & vertical modifiers
+Consistent when strung together
++ If you were using {{ site.fontawesome.name }} {{ site.fontawesome.minor_version }}, you should be able to just switch to {{ site.forkawesome.name }} {{ site.forkawesome.minor_version }} and get all the benefits from it. + If you were using npm or composer packages, replace the ones you were using by this {{ site.forkawesome.name }} ones. Or if you downloaded a static copy of {{ site.fontawesome.name }}, download the latest version of {{ site.forkawesome.name }} and + replace CSS and font files in your project and you should be good to go. +
++ We paid special attention not to change unicode codepoints for the existing icons, nor changed the CSS class names or icon names from {{ site.fontawesome.name }} {{ site.fontawesome.minor_version }}. + Though we added a few more icons and made the process of contributing to this project much easier. + Though, if you see a mistake, please don't hesitate to file a bug. +
++ Got a great idea for a Font Awesome goodie or shirt? Don't see your favorite icon in a wear-able or share-able format? +
+ ++ We're all ears! Spend a few minutes and let us know what you'd want. If we end up using your idea, we'll send you a free copy. +
++ Please note: While we appreciate all suggestions, not every idea might be right for Font Awesome nor could we physically make every idea. +
++ + + + + + Twitter Icon + + + + + + + Facebook Icon + + + + + + + GitHub Icon + +
++ + + + + + Twitter Icon + + + + + + + Facebook Icon + + + + + + + GitHub Icon + +
++ + + + + + Twitter Icon + + + + + + + Facebook Icon + + + + + + + GitHub Icon + +
diff --git a/la_chariotte/static/fork-awesome/src/doc/_includes/tests/stacked-with-text.html b/la_chariotte/static/fork-awesome/src/doc/_includes/tests/stacked-with-text.html new file mode 100644 index 0000000..28a7500 --- /dev/null +++ b/la_chariotte/static/fork-awesome/src/doc/_includes/tests/stacked-with-text.html @@ -0,0 +1,4 @@ + + + 27 + diff --git a/la_chariotte/static/fork-awesome/src/doc/_includes/tests/stacked.html b/la_chariotte/static/fork-awesome/src/doc/_includes/tests/stacked.html new file mode 100644 index 0000000..4d00407 --- /dev/null +++ b/la_chariotte/static/fork-awesome/src/doc/_includes/tests/stacked.html @@ -0,0 +1,58 @@ + + + + ++ + + + + Twitter Icon + + + + + Facebook Icon + + + + + GitHub Icon +
++ + + + + Twitter Icon + + + + + Facebook Icon + + + + + GitHub Icon +
++ + + + + Twitter Icon + + + + + Facebook Icon + + + + + GitHub Icon +
diff --git a/la_chariotte/static/fork-awesome/src/doc/_includes/thanks-to.html b/la_chariotte/static/fork-awesome/src/doc/_includes/thanks-to.html new file mode 100644 index 0000000..fe2232b --- /dev/null +++ b/la_chariotte/static/fork-awesome/src/doc/_includes/thanks-to.html @@ -0,0 +1,19 @@ ++ Thanks to @davegandy for his + original work on {{ site.fontawesome.name }} and to + @gtagliala for managing pull + requests and issues on the Font Awesome Github repo. +
++ Thanks to the still growing community of {{ page.total_contributors }} contributors who've carried this project from the early days of {{ site.fontawesome.name }} and who have joined this project since the fork. + If you feel your contribution has not been recognized. Please file an issue, we'll happily add you to the list. +
+After you get up and running, you can place {{ site.forkawesome.name }} icons just about anywhere with the <i>
tag:
+ Note: to improve web accessibility, we recommend using aria-hidden="true" to hide icons used purely for decoration. +
+ ++ Icons are symbols that can convey a ton of information and really help + people comprehend directions, signs, and interfaces. It's important + that we create and use them so that they can reach the largest amount + of people possible. +
++ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. +
++ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. +
+
+-
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+ Tweet
+
+
+
+ -
+
+
+
+