Comments (5)
I am rendering SVG's as images. I save them into a file in the static folder and then render them like:
<img src="<%= Routes.static_path(@conn, "/images/svg/my.svg") %>">
I prefer this approach because it keeps my Html clean.
from auth.
Just need to dwyl-ify the layout.
from auth.
Yes, there's a bit more code in the HTML template, but it loads a lot faster and is more reliable.
<div style="display:flex; flex-direction:column; width:18em; margin: 20px auto;">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<a href="<%= @oauth_github_url %>"
style="display:inline-flex; align-items:center; min-height:60px;
background-color:#24292e; font-family:'Roboto',sans-serif;
font-size:14px; color:white; text-decoration:none;">
<div style="margin: 1px; padding-top:5px; min-height:30px;">
<svg height="36" viewBox="0 0 16 16" width="64px" style="fill:white;">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
1.08.58 1.23.82.72 1.21 1.87.87
2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08
2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0
.21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
</div>
<div style="margin-left: 5px; font-size: 2em;">
Sign in with GitHub
</div>
</a>
<a href="<%= @oauth_google_url %>"
style="display:inline-flex; align-items:center; min-height:60px;
background-color:#4285F4; font-family:'Roboto',sans-serif;
font-size:14px; color:white; text-decoration:none;
margin-top: 15px">
<div style="background-color: white; margin:2px; padding-top:10px; padding-left:2px; min-height:57px; min-width:57px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3"
width="45px" height="36" style="display:inline-flex; align-items:center;" >
<path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/>
<path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/>
<path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/>
<path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/>
</svg>
</div>
<div style="margin-left: 10px; font-size: 2em;">
Sign in with Google
</div>
</a>
<div>
from auth.
Final 3rd Party Auth UI (for MVP)
from auth.
Done.
https://dwylauth.herokuapp.com
from auth.
Related Issues (20)
- Groups UI/UX HOT 1
- Phoenix.Template.UndefinedError Could not render "live.html" for AuthWeb.LayoutView HOT 1
- Chore: Fix Failing Auth Tests HOT 3
- Review how auth application works
- Chore: Sample `people` for testing `groups` on `localhost` HOT 3
- Chore: Use `statuses` [in-memory] in `auth`
- Auth: Deploy Demo Version to Fly.io HOT 11
- Bug: GitHub Username Not Returned by Auth ... 🤦♂️ HOT 7
- BLOCKER: Internal Server Error when Registering with Email Address! HOT 5
- Error `expected a binary but got: nil` HOT 7
- Technical Question: should we use a `JWT` for `AUTH_API_KEY`? HOT 8
- Feat: Auth Setup Wizard `#discuss`
- Feat: Use `Gmail` to send Email!! 📧 🤯
- Tech Question: Do we even Need an `AUTH_API_KEY`? 💭 🤷♂️ HOT 5
- Feat: Copy `AUTH_URL` to clipboard
- Feat: Allowed List of URLs for each `AUTH_API_KEY`
- Chore: Generate ERD for `mix phx.gen.auth` HOT 2
- Chore: Update the `people.email` to use `Fields.EmailEncrypted` HOT 4
- Feat: Re-create Login Screen Using Tailwind CSS HOT 2
- Feat: Delegated Auth
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from auth.