I created a Vue project by Vue-CLI, when I use WebStorm open the project, but the .vue file seems like plain text, there is no highlight syntax.
The code are bellow:
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>Core Docs</li>
<li>Forum</li>
<li>Community Chat</li>
<li>Twitter</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>vue-router</li>
<li>vuex</li>
<li>vue-loader</li>
<li>awesome-vue</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Make sure that Vue.js plugin is enabled in Preferences | Plugins - it is bundled with recent WebStorm versions. If it's installed and enabled, make sure that *.vue extension is assigned to Vue.js Templates in Preferences | Editor | File Types, and that your don't have App.vue pattern registered for Text file type there
First, add the Vue.js plugin in Preferences | Plugins.
Then you should
Go to : WebStorm -> Preferences -> Editor -> File Types -> HTML:
in the Registered Patterns there is no *.vue.
Add the *.vue in the Registered Patterns like this:
Then apply it.
Related
When I run the app in localhost, it works fine. but after deployed to pythonanywhere, Login with Facebook button doesn't work.
when I refresh Login page, in console, it shows =>
Failed to load resource: https://username.pythonanywhere.com/static/facebook/js/fbconnect.js the server responded with a status of 404 (Not Found)
Refused to execute https://username.pythonanywhere.com/static/facebook/js/fbconnect.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
in template:
<button class="effect" style="width: 100%; background-color: rgb(58, 110, 255); height: 36px; border: none; color: white; border-radius: 3px; display: flex; justify-content: center;align-items: center;"><img style="height: 24px; width: 24px; background-color: white; padding: 1px; border-radius: 50%;" src="{% static 'images/fblogo.png' %}" alt=""><span style="margin-top: 2px; display: block; margin-left: 8px; font-size: 16px;"> Login with Facebook</span></button> <br>
Another problem is: CSS doesn't load in admin page
how to fix this?
Edit: now if i click "Login with facebook" button, it shows, ReferenceError: Can't find variable: allauth
what to do now?😖
I am unable to apply Google Fonts API to my Ionic2 project. Here's what I tried:
app.scss
#font-face {
font-family: 'Yanone Kaffeesatz', sans-serif !important;
}
html, body {
font-family: 'Yanone Kaffeesatz', sans-serif !important;
}
index.html
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">
Why isn't it working?
app.scss
#import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
// Font Variables
$yanone-kaffeesatz: 'Yanone Kaffeesatz', sans-serif !important;
// Styles
html, body {
font-family: $yanone-kaffeesatz;
}
local use
assets/custom-fonts/YanoneKaffeesatz-Regular.ttf
on theme/variables.scss
#font-face {
font-family: 'yanone-kaffeesatz';
src: url('../assets/custom-fonts/YanoneKaffeesatz-Regular.ttf') format('truetype');
}
I have a popover functionality to be implemented in my project developed using ember js. I have a button, which when clicked should show a popover with a list of action menus.
I tried an example with bootstrap popover, which looks good to our cause, but I am unable to use that as we are not using bootstrap lib and don't want to include it only for this popover feature.
Is there any inbuilt support from ember js on the popover function yet (we are using ember v0.2.3)? I know it has a modal implementation but that will diable all other functions on the page until closed.
If you are aware of any custom popover impls that can be ported for trial, please let me know.
Thanks!
A nested component would be ideal for this. Rendering into an outlet like the modal examples doesn't make much sense to me.
You will need to handle a click event in your component's .js file.
Use a property on the component like isOpen to keep track of whether the popover should be shown or not.
Use an if isOpen in your component's template to control whether the child component (the popover) gets rendered or not.
Edit: Working JSBin
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember-template-compiler.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember.debug.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script type='text/x-handlebars'
data-template-name='application'>
<p>The element below is a component.<br><br><br><br><br><br><br></p>
{{popover-item text='click or hover for popover' class='popover-wrapper'}}
</script>
<script type='text/x-handlebars'
data-template-name='components/popover-item'>
<a href='#' class='popover-link'>{{text}}</a>
{{#if isOpen}}
{{popover-menu isOpen=isOpen}}
{{/if}}
</script>
<script type='text/x-handlebars'
data-template-name='components/popover-menu'>
{{#if isOpen}}
<div class='popover'>
<ul>
<li><a href='#'>popover item one</a></li>
<li><a href='#'>popover item two</a></li>
<li><a href='#'>popover item three</a></li>
</ul>
</div>
{{/if}}
</script>
</body>
</html>
Javascript:
App = Ember.Application.create();
App.Router.map(function(){
return [];
});
App.PopoverItemComponent = Ember.Component.extend({
isOpen: false,
click: function() {
this.toggleProperty('isOpen');
},
openPopover: function() {
this.set('isOpen', true);
}.on('mouseEnter'),
closePopover:function() {
this.set('isOpen', false);
}.on('mouseLeave')
});
CSS (very very rough)
* { box-sizing: border-box; }
body { font-family: sans-serif; }
a {
text-decoration: none;
color: #000;
}
.popover-link {
display: inline-block;
width: auto;
padding: 10px;
background: #6FAEEC;
}
.popover-link:hover {
background: #70B5F9;
}
.popover-wrapper {
position: relative;
}
.popover-link {}
.popover {
border: 1px solid #ddd;
position: absolute;
bottom: 40px;
background: #fff;
padding: 0;
box-shadow: 3px 3px 9px -4px rgba(0,0,0,0.75);
}
.popover ul {
list-style:none;
margin: 0;
padding: 0;
}
.popover a {
display: block;
padding: 5px 10px;
vertical-align:middle;
border-bottom: 1px solid #efefef; #efefef;
}
.popover a:hover {
background: #efefef;
}
Using Foundation 5
<p class="reverse-text">Blahbuhblah</p>
p.reverse-text {
color: white;
}
This isn't working. Other custom styles I have added work fine. Trying to change color of sidebar paragraph text.
add the css class above the tag
<style>
p.reverse-text {
color: white !important;
}
</style>
<p class="reverse-text">Blahbuhblah</p>
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.