小编rea*_*lph的帖子

使用CSS网格创建表

我正在尝试使用CSS网格创建一个表,基于内容使用相等的列.我想避免使用<table>.这是此问题的后续问题:使用CSS网格自动调整列

我想要实现的目标:

在此输入图像描述

此表有效:https://codepen.io/anon/pen/baExYw

但是我想把每一行包裹起来div,这不足为奇地打破了桌子.

该表格已破:https://codepen.io/anon/pen/qpbMgG

app.html

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

app.css

.wrapper …
Run Code Online (Sandbox Code Playgroud)

html css css-grid

7
推荐指数
3
解决办法
3万
查看次数

构建Firebase中的关系

我的Firebase中有两个项目:providers而且services,我正在尝试使用Firebase推荐的扁平化架构方法找出构建和建立关系的最佳方法.

我的数据看起来像这样:

{
  "services" : {
    "hip_replacement" : {
      "title" : "Hip Replacement"
    }
  },

  "providers" : {
    "the_blue_hospital" : {
      "title" : "The Blue Hospital"
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

我想将这两个项目链接在一起,这样如果您要访问髋关节置换页面,蓝色医院会显示在它下面,如果您要访问蓝色医院页面,髋关节置换将显示在其下方.基本上是一种双向关系.

构建这样的东西最好的方法是什么?我在考虑以下几点:

{
  "services": {
    "hip_replacement": {
      "title": "Hip Replacement",
      "providers": {
        "the_blue_hospital": true,
        "the_red_hospital": true
      }
    },
    ...
  },
  "providers": {
    "the_blue_hospital": {
      "title": "The Blue Hospital",
    },
    "the_red_hospital": {...
    },
    "the_green_hospital": {...
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

有没有更好的方法来实现这个或更优雅的解决方案?任何帮助表示赞赏.

提前致谢!

denormalization relationship firebase

6
推荐指数
1
解决办法
9708
查看次数

从SASS的百分比中减去像素数?

我知道你可以在Sass/Scss中做一些简单的数学运算.但有没有办法从百分比中减去像素?例如:

$image-size: 200px;

.bio {
    width: 100% - $image-size;
}
Run Code Online (Sandbox Code Playgroud)

sass pixels percentage

5
推荐指数
2
解决办法
1万
查看次数

如果绑定为空,则为角度默认值

我见过类似的问题,然后跟着发球.如果绑定空/未定义(带过滤器),角度模板默认值

我的对象看起来像这样:

{
  "image": {
    "icon_url": "http://static.giantbomb.com/uploads/square_avatar/9/93770/2496414-dying-light-2013523175751_8.jpg",
    "medium_url": "http://static.giantbomb.com/uploads/scale_medium/9/93770/2496414-dying-light-2013523175751_8.jpg",
    "screen_url": "http://static.giantbomb.com/uploads/screen_medium/9/93770/2496414-dying-light-2013523175751_8.jpg",
    "small_url": "http://static.giantbomb.com/uploads/scale_small/9/93770/2496414-dying-light-2013523175751_8.jpg",
    "super_url": "http://static.giantbomb.com/uploads/scale_large/9/93770/2496414-dying-light-2013523175751_8.jpg",
    "thumb_url": "http://static.giantbomb.com/uploads/scale_avatar/9/93770/2496414-dying-light-2013523175751_8.jpg",
    "tiny_url": "http://static.giantbomb.com/uploads/square_mini/9/93770/2496414-dying-light-2013523175751_8.jpg"
  },
  "name": "Dying Light",
  "original_game_rating": null,
  "original_release_date": null,
  "objectID": "346569380"
}
Run Code Online (Sandbox Code Playgroud)

我将左侧表达式包装在括号中,但是对于具有一年的项目,它不显示"TBA" null.

<span>{{ (getDate(hit.original_release_date) | date:'yyyy') || 'TBA' }}</span>
Run Code Online (Sandbox Code Playgroud)

我有一种感觉,这是因为我正在引用一个函数并且已经使用了一组括号.我怎么解决这个问题...?

对此有任何帮助表示赞赏.提前致谢!

更新:

这是getDate()功能:

$scope.getDate = function(date) {
  return $filter('dateToISO')(date);
};
Run Code Online (Sandbox Code Playgroud)

dateToISO过滤器:

.filter('dateToISO', function() {
  return function(input) {
    var dateTime = input.split(" ");
    var date = dateTime[0];
    var datePartials = date.split("-");
    var time = dateTime[1]; …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs

5
推荐指数
2
解决办法
1万
查看次数

在多个元素上使用 itemprop="articleBody" (schema.org)

itemprop="articleBody"在多个元素上使用是不好的做法。我问是因为我的页面是这样的:

<main class="post content">
  <article itemscope itemType="http://schema.org/BlogPosting">
    <header>
      <h1 itemprop="headline">My Blog Headline</h1>
      <p><time class="dt-published" itemprop="datePublished" pubdate datetime="2015-01-24 19:08:00">Jan 24, 2015</time></p>
      <p itemprop="author">Published by <a class="p-author h-card" itemprop="name" href="http://author.co.uk">Author Name</a></p>
    </header>

    <section itemprop="articleBody">
      <p>Article body</p>
      <p>Article body</p>
    </section>

    <section class="gallery">
      ...
    </section>

    <section itemprop="articleBody">
      <p>Article body</p>
      <p>Article body</p>
    </section>

  </article>
</main>
Run Code Online (Sandbox Code Playgroud)

我的文章正文之间有一个画廊,可以像上面一样itemprop="articleBody"在多个sections 上使用吗?

PSdisplay: none在我的上使用也是不好的做法itemprop="author"吗?我不希望它成为页面设计的一部分,还有其他方法吗?

structured-data microdata schema.org

5
推荐指数
1
解决办法
978
查看次数

Angular JS错误:达到10 $ digest()迭代.中止

我正在使用angularjs-google-maps,并且在尝试将我的客户作为地图上的标记循环时收到错误.

<map>
  <custom-marker ng-repeat="cust in customers" position="[ {{ cust.lat }}, {{ cust.lon }} ]">
    <div class="{{ cust.category }}">{{ cust.name }}</div>
  </custom-marker>
</map>
Run Code Online (Sandbox Code Playgroud)

该错误似乎有事情做与cust.categorycust.name,当我删除这些,他们工作得很好.

这是我得到的错误消息的前几行:

Watchers fired in the last 5 iterations: [["[ cust.category , cust.name ]; newVal:
[\"pro\",\"Fred\"]; oldVal: [\"pro\",\"Fred\"]","fn: function (context) {\n          
try {\n for(var i = 0, ii = length, part; i<ii; i++) {\n
Run Code Online (Sandbox Code Playgroud)

完整的错误消息在这里.

对此有任何帮助表示赞赏.提前致谢!

UPDATE

代号为定制标记指令,是角谷歌,地图的一部分,是在这里.

javascript angularjs angular-google-maps

5
推荐指数
1
解决办法
1580
查看次数

Grunt Babel每个文件需要6秒

我正在尝试在我的grunt构建过程中使用Babel将我的.js项目文件从ES6转换为ES5.我有一个watch任务正在查看我的.js目录中的更改,当检测到更改时,我运行babel任务.

但是出于某种原因,仅更改一个.js文件需要6-10秒才能完成.我感觉它正在整个项目的转变,但我不确定.我Gruntfile.js看起来像这样:

grunt.initConfig({
  watch: {
    babel: {
      files: ["<%= yeoman.app %>/scripts/**/*.js"],
      tasks: ["babel"]
    },
    livereload: {
      options: {
        livereload: LIVERELOAD_PORT
      },
      files: [
        "{.tmp,<%= yeoman.app %>}/scripts/**/*.js",
      ]
    }
  },
  babel: {
    options: {
      sourceMap: true,
      presets: ['es2015']
    },
    dist: {
      files: [
        {
          expand: true,
          cwd: '<%= yeoman.app %>/scripts/',
          src: ['**/*.js'],
          dest: '.tmp/scripts/'
        }
      ]
    }
  }
});
grunt.registerTask("serve", function(target) {
  return grunt.task.run(["watch"]);
});
Run Code Online (Sandbox Code Playgroud)

当我运行grunt serve并更改文件时,它会记录执行时间: …

javascript gruntjs babeljs

5
推荐指数
1
解决办法
666
查看次数

使用 CSS 网格自动调整列

我正在尝试弄清楚 CSS 网格是否能够像表格一样运行。

因此,如果我有很长的“单元格数据”(第 2 列),并且表中其他地方有可用空间,我不希望它像下图中那样换行:

在此输入图像描述

我想要实现的就是这样的事情。具有较长内容的列会增长,而其他列会根据该列中的内容而缩小。

在此输入图像描述

我在 CodePen 上上传了一个示例: https: //codepen.io/anon/pen/WdNJdY

.wrapper {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
Run Code Online (Sandbox Code Playgroud)
<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>
  <div class="box d">short data</div>
  <div class="box e">a really long piece of data</div>
  <div class="box f">short data</div>
</div>
Run Code Online (Sandbox Code Playgroud)

我对 CSS 网格非常陌生,所以我很好奇这是否可能。

任何帮助表示赞赏。提前致谢!

html css css-grid

5
推荐指数
1
解决办法
1347
查看次数

Charles 代理:映射到 GET 请求而不是 OPTIONS

有没有办法根据特定请求在 Charles 中进行本地映射?我的 API 发出一个 OPTIONS 请求,然后发出一个 GET 请求。

当我在 Charles 中进行本地映射时,它会将响应映射到该 OPTIONS 请求。我希望它将响应映射到 GET 请求。

有没有解决的办法?我是这个工具的新手。

任何帮助表示赞赏。提前致谢!

charles-proxy

5
推荐指数
1
解决办法
1545
查看次数

Firebase:$ save to Not Yet Created Object

我试图找出如何的结果保存serviceId到一个services叫上一个父对象provider1,当services对象是尚未建立.

我的Firebase数据如下所示:

"providers" : {
  "provider1" : {
    "name" : "The Whittington Hospital",
  }
}
Run Code Online (Sandbox Code Playgroud)

这就是我如何保存结果serviceId:

for (var providerKey in service.providers) {                       
  var providerId = providers.$getRecord(providerKey);             
  providerId.services[serviceId] = true;                          
  providers.$save(providerId);                                     
}
Run Code Online (Sandbox Code Playgroud)

但我无法设置[serviceId]true,因为services对象尚不存在,它是未定义的.

Firebase不允许你创建空对象,否则我的下面会有一个空的services: {}obj provider1.

我怎样才能解决这个问题.任何帮助表示赞赏.提前致谢!

javascript angularjs firebase angularfire

4
推荐指数
1
解决办法
136
查看次数